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
}


SUPER IMPORTANT SIDE NOTE

All Squarespace sites are built using a specific theme family, and that means not all elements are called the same thing behind the scenes. When working in CSS it is important to identify the initial symbol that your CSS code needs to work with an element. If this is going over your head, don’t worry! It really isn’t as complicated as it sounds. When using code, the very first symbol can help the system figure out what you are asking it to do. Some theme families use a pound symbol, or hashtag if you were born after 1985 ( # ) while others use a period ( . ) Brine is a common family that uses ( . ) while Bedford templates generally use ( # ) If your CSS code isn’t working the way you want it to, the first thing you can do to troubleshoot that would be to see if changing the symbol can make it work.

If you are still pretty new to CSS, this is something I cover in my free Getting Started with CSS guide. Definitely check it out if you are curious about CSS or code in general: