How to add a button to an accordion block in Squarespace

content block

Sep 26

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?!

The code below will add a unique style to any links inside an accordion block. Check out the tutorial video below to see how to add this code to your site, and how to customize it. if you are brand new to CSS, you’ll find important instructions below, like how to use this code on a specific accordion bock on your site.

/* normal state */
.sqs-block-accordion a {
 border: 1px solid #000;
 background: pink;
 color: #333;
 padding: .5rem 
}
/* hover state */
.sqs-block-accordion a:hover {
 border: 1px solid #000;
 background: #eee; 
}