Custom Buttons Inside Accordion Block on Squarespace [Updated CSS]

There’s now a new way to add buttons to an accordion block on Squarespace so with that in mind I thought it was time I updated my tutorial talking you through the process.

Watch the video

Check out the YouTube video below 👇

Add an accordion block to your section on your website page and then add the text to your accordion block that you want your button to include e.g. find out more.

In the text section for your accordion block, make this text a link to the page that you want the button to point to. 

To turn this text into a button you need to use some custom code so head to Website Tools > Custom CSS and add the following code to your custom CSS box:

.sqs-block-accordion {

p a{

border: solid 1px;

padding: 10px 15px;

transition: 0.2s;

margin-top: 40px !important;

margin-bottom: 40px !important;

&:hover {

background: #000000 !important;

color: #ffffff !important;

transition: 0.2s;

}

}

}

This code tells Squarespace that this is targeting the accordion block and adds a border to the link text, turning it into a button.

You can play around with the padding to get the style of button you want to create and you can also change the colour of the hover effect and text. 

The transition section of the code can also be edited depending on what effect you want your button to have when a user scrolls over it. 

---

📩 Join the inner circle to get exclusive code updates

---

If you don’t want a square button and instead want to create curved corners, you can add a line to your code targeting the border radius.

.sqs-block-accordion {

p a{

border: solid 1px;

padding: 10px 15px;

transition: 0.2s;

border-radius: 20px 20px 20px 20px;

margin-top: 40px !important;

margin-bottom: 40px !important;

&:hover {

background: #000000 !important;

color: #ffffff !important;

transition: 0.2s;

}

}

}

And it’s as simple as that. Hit save and you’ll have added a button to your accordion block with some simple code!

---

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?