How to add a button to an accordion block on Squarespace

If you ask me, accordion blocks are one of the best updates that Squarespace have brought out for a long time. 

Their one drawback however is that you’re pretty limited in terms of what you can add into the block other than text. In fact, I had a client recently ask if we could add a button into an accordion block. 

Before going back and saying no, I wondered if it would be possible to create a coding solution to add a button to an accordion block. And guess what? I’ve got one. 

So, how do you add a button to an accordion block on Squarespace? 

First things first you want to navigate to your accordion block and add in your link. Your link is the page you want your button to direct users to so add this, and your anchor text/button text, to the accordion.

Then, head to custom CSS within the design panel, create some new lines and name them accordion buttons. Next, find the block ID for your accordion block and copy it into the custom CSS. 

Before adding in the specific code you need to add “a”. This tells Squarespace that the code refers only to the links within the block ID, not the whole accordion section. 

The code you then need to add in is: 

#BLOCK-ID a {
border solid 1px red;
border radius: 50px;
padding: 10px
}

The red of course refers to the colour of your button border and you can change it to whatever colour suits your brand whilst the 50px radius makes the button pill shaped as opposed to rectangular.

Watch the video

Check out the YouTube video below 👇

You can also edit the padding of your accordion box, adding in some more if you feel like your button is too squashed. 

Have a play around with the padding and border radius to find the shape and positioning that works best for your website. 

You can also add background colours, hover effects and transitions with additional lines of code:

#BLOCK-ID a {

border: solid 1px black;

border-radius: 50px;

padding: 10px 15px 10px 15px;

transition: 0.2s;

color: black;

&:hover {

background: white !important;

transition: 0.2s;

color: black;

}

}

---

📩 Join the inner circle to get exclusive code updates

---

So there we have it, a quick and relatively simple way to add a button to an accordion block on Squarespace with just a few lines of code. 

The customisation capabilities of this are pretty endless so I recommend having a play around and seeing what you can come up with!

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?