How to add a button to an accordion block in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

The active link inside an accordion block description has a special code name (aka selector) that we can target with CSS. This means we can tell a computer to display it differently than the rest of the text.

If we give it a border and a background, and a hover effect, it can look and act like a regular button. How cool is that?!

Here are the codes from this tutorial; be sure to adjust the color, size, and border to match your website style!

This code is for the button in its normal state:

.sqs-block-accordion a {
border: 1px solid #000;
background: pink;
color: #333;
padding: .5rem
}

This is what it will look like on a hover:

.sqs-block-accordion a:hover {
border: 1px solid #000;
background: #eee;
}