Jump to content

Changing the Color of Buttons When Hovering

Recommended Posts


I attempted to use the Squarespace tutorials to do some CSS coding, and I was able to get one of the codes to work, but not the other one. I was able to the grayscale when hovering over images to work with this code .sqs-block-image: hover {filter: grayscale(1)}. However, when I try to get the button to change color when I hover, it doesn't work. I tried to use this code .sqs-block-button-element:hover{ background-color: red!important}.

Any ideas? Thanks in advance!

Link to comment
  • Replies 2
  • Views 362
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Actually guys, we figured it out. 

.sqs-block-image:hover {
  filter: grayscale(1)
.form-wrapper input[type=submit]:hover {background: #CB6CE6;}

Use the block-image code to change your images to grayscale when hovering over them. And then the form-wrapper code to change the color of your buttons when you hover over them in a form (like submitting contact information). Change the hex code # to whatever color you are wanting. 

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.