How to create button hover effects in Squarespace

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

You can have three unique button styles in Squarespace, but to change the look of a button on a hover, you'll need a little bit of custom CSS, and that's exactly what this tutorial will teach you. The tricky part is saying the right name for the right button! 

There are over 15 different types of buttons with unique names in Squarespace.  This tutorial covers the main button blocks - primary, secondary, and tertiary.

You can change all kinds of things about a button on a hover, like the border, background, shadow and font styles.

Here are the selectors from the video:

All button blocks: (.sqs-block-button-element:hover)

Primary: (.sqs-button-element--primary *or* .sqs-block-button-element--medium)

Secondary: (.sqs-button-element--secondary *or* .sqs-block-button-element--large)

Tertiary: (.sqs-button-element--tertiary *or* .sqs-block-button-element--small)

Here is the full code example I used in the tutorial:

.sqs-block-button-element:hover {
border-color: purple!important;
background-color: #50bdb8!important;
box-shadow: 5px 5px 15px 10px #DDD!important;
font-weight: bold!important
}