Changing Your Button's Color on Hover Mode

One way to make your template buttons look not only unique and on-brand but also invite your audience to click is to add an eye-catching hover mode.

Squarespace’s buttons already offer two styles:

  • From solid background color to slightly faded.
  • From outline to a solid background color.

But what if you want to have the change go the other way around? From solid to outline or from one color to a different one?

In this post, you’ll learn how you can achieve those two effects with a couple of lines of CSS.

How to change your button's color on hover mode, in Squarespace, by using CSS injection

 

Finding your button's class

First, you’ll need to find the classes of your button through inspect element (I recommend using Chrome) by right-clicking on the button you want to alter and selecting Inspect.

Right-click on the button to display Inspect Element

Next, with the <a> tag selected, go to the right-hand sidebar and from the top-most group of classes, highlight and copy the part that’s in black.

Finding the button classes with inspect element

The grayed out text refers to the classes of buttons that have the same style as the one you’re selecting (e.g rounded) but in different sizes. The section in black (showed in white below), are the classes for the button size you’re currently selecting. In this case, the entire group reads:

.small-button-shape-rounded .sqs-block-button .sqs-block-button-element--small, .medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium, .large-button-shape-rounded .sqs-block-button .sqs-block-button-element—large

But only the white section will be used in this example to modify the medium size button.

Keep in mind that depending on the style of button you’re using, your classes will be different.

 

Changing a button's color on hover

To change the background color of your solid button, you only need a second hex code to alter the background-color property. In this example, it will go from black to a green-blue color, #009999.

With your group of classes selected, go to your CSS injection window and paste the classes you got from the inspect element window:

.medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium {
}
Classes for the medium sized Squarespace button

If you were to change the properties of that snippet as it is, you would be altering the button itself. Try it out! Add this to your snippet and see how the button changes its background color:

.medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium {
background-color: #009999;
}
Changing the button's normal mode color with CSS

However, since you want to edit the hover mode, you need to use the pseudo-class :hover after the last class like so:

.medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium:hover {
}

Now, whichever changes you make will be applied to the button’s hover mode instead.

.medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium:hover {
background-color: #009999;
}
Adding a different color to the hover mode of the button

 

Changing a button from solid to outline

To create this effect, three things are needed: changing the current background color of the button, adding a border or outline to the hover mode, and changing the color of the text.

So if you have your black button and want to switch to a white button with black border, you’ll need to add:

.medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium:hover {
background-color: transparent;
border: 2px solid #000000;
color: #000000;
}
Changing the hover mode of a button from solid to outline

If you're wondering why transparent instead of white, it's in case you decide to add your button to a colored background.

Regarding the border, you can change 2px to any thickness you want (1px, 3px...) and add your corresponding color hex code where #000000 is.

The color of the font changes thanks to the color property, where #000000 can be substituted by your chosen color.

Hover mode for a solid button going into an outline thanks to a CSS snippet

Now, you might notice there’s a slight misalignment when making this change on a solid color button. If you look closely you can see the text moves a bit and the button seems to extend in size, in turn making the content move down just a tad:

HOVER OVER ME

This is because you’re adding a border to the hover mode of a button that didn’t have any, hence affecting the original size by a couple of pixels. However, a quick way to solve this is to add a border to the normal button mode as well (without the :hover pseudo-class):

.medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium {
border: 2px solid #000000;
}
Correcting the button to match the hover mode size

Just make sure the pixel size matches the one you’ll be adding in the hover mode and making the color either transparent or match the button color (in this case, it would also be black).

HOVER OVER ME

TO KEEP IN MIND

For some Squarespace buttons the changes won’t work unless you use the !important rule like this:
background-color: transparent!important;
border: 2px solid #000000!important;

Just make sure you use it ONLY if it’s necessary.

How about that? Now you can add two different hover modes to your Squarespace buttons with just a few lines of CSS.

 

Until next time,
B.


LOOKING FOR YOUR CHEATSHEET?

Get your own copy to learn more about the properties used in this tutorial and further style your buttons!

ALRIGHT! TAKE ME THERE
Take a look at how you can change your Squarespace buttons' hover mode with custom code