Changing the Button Color on a Hover

This quick tutorial will show you how to change the color of all the buttons on your website when someone hovers over it with their cursor. You can change all of the buttons to be the same color on a hover, or use different colors for the small, medium, and large buttons. These codes use what is known as a HEX color value, six characters after a # sign. If you dont know the hex color you want to use, don’t worry! There are two places you can go to figure it out. You can upload an image and click on it to see what the hex color value is using this website or you can click here to try the same Chrome extension that I use. Anywho, once you have your color code ready, watch the quick tutorial and grab those copy+paste CSS codes below!

 
 

The following code is to change the hover color for all buttons:

.sqs-block-button-element:hover {
background-color: #ffffff;//button color
color: #000000;//button font color
}

The following code is to change the hover color for only small buttons:

.sqs-block-button .sqs-block-button-element--small:hover {
background-color: #ffffff;//button color
color: #000000;//button font color
}

The following code is to change the hover color for only medium buttons:

.sqs-block-button .sqs-block-button-element--medium:hover {
background-color: #ffffff;//button color
color: #000000;//button font color
}

The following code is to change the hover color for only large buttons:

.sqs-block-button .sqs-block-button-element--large:hover {
background-color: #ffffff;//button color
color: #000000;//button font color
}


squarspace buttons styles.jpg

WANT SOME INSPIRATION?

BUTTONS CAN DO SO MUCH MORE THAN
CHANGE COLOR! CHECK OUT MY BUTTON
PLUGINS TO GET MORE IDEAS FOR YOUR SITE