Jump to content

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

Go to solution Solved by Mattbia,

Recommended Posts

@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 😊

If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.



Link to comment

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.


.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{

/* 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{ 

.sqs-block-form span.required:before{ 

Link to comment

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.  

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.