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.

Adding a link to an accordion block on Squarespace

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.

Adding a button to accordion block Squarespace

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?

Sam Crawford

by Crawford is led by Sam Crawford, a multi-award-winning Squarespace website designer with 700+ sites launched for clients in over 30 countries. He builds fast, mobile-friendly Squarespace 7.1 websites designed for SEO, clear structure, and conversion.

As a Squarespace Expert, Enterprise Partner, Circle Member, and community speaker, Sam is known for pushing the platform’s limits. With 200+ reviews, clients highlight by Crawford’s clarity, precision, and real-world results like higher rankings and stronger lead generation.

https://bycrawford.com
Previous
Previous

Create a Sleek Testimonial Section on Squarespace (Using Just Text Blocks)

Next
Next

Importing Image Metadata on Squarespace