What CSS can I use to override Colors of the hover form Button

Hey all, I can not find how to invert the colors when the mouse hovers over a submit button on a form...I want it to go from blue background, white text >>> White Background, blue text.

Can anyone help me with the code needed for this...

Thank you in advance

@Mattbia Can you share your website address? You've already got code in your Custom CSS panel to achieve this effect as this isn't standard hover for Squarespace buttons.

Have you gone through the Custom CSS panel (in Website > Website Tools > Custom CSS) to see what you've already got in there? It's likely you'll need to edit that - we can help 😊

Hi @CassAggett, 

This is what I got in there so far. The hover effect for buttons is created using the "flex" animation under animations in site styles.

//Shadow//
.sqs-block-button-element {  
-webkit-box-shadow: 10px 10px 41px -11px rgba(48,48,48,1);
-moz-box-shadow: 10px 10px 41px -11px rgba(48,48,48,1);
box-shadow: 10px 10px 41px -11px rgba(48,48,48,1);
}

.video-block .video-player{
     padding-bottom:120%}

/* Change the focus style */
.sqs-block-form .field-list .field input:focus, 
.field textarea:focus{
background: #F6EDCE;
outline: none!important
}

/* Change (required) to an asterisk */
.sqs-block-form span.required{ 
visibility:hidden 
} 
.sqs-block-form span.required:before{ 
content:"*";  
visibility:visible!important 
}

Sorry website address: bianutrition.com/entry-form

The hover effect on the main buttons works great and inverts colors fine, but for some reason, the form button does not follow the same logic and defaults to site colors rather than inverting selected button colors.