How to add equal or full width buttons in Squarespace (7.0 & 7.1)

PIN TO SAVE FOR LATER

The default buttons in the Squarespace drag and drop builder are sized in proportion to the text content in the button, resulting in mismatched buttons sizes throughout your site. To create consistency throughout, we recommend adding equal width buttons with the following quick and easy CSS snippets.

Default buttons:

Buttons after CSS:

Screen Shot 2021-09-10 at 1.43.28 PM.png

NEXT STEPS:

01) Go to: Design > Custom CSS

02) Depending on which button size you’d like to target, copy and paste one (or all) of the following CSS snippets

To update small buttons site wide:

/* Small Buttons */
.sqs-block-button-element--small {
 width: 70% !important;
}

To update medium buttons site wide:

/* Medium Buttons */
.sqs-block-button-element--medium {
 width: 70% !important;
}

To update large buttons site wide:

/* Large Buttons */
.sqs-block-button-element--large {
 width: 70% !important;
}

Notes:

Feel free to adjust the width of the buttons by changing the percentage in the code snippets above — we recommend anything between 60-80% for buttons that do not span the full width.

Alternatively, you can use pixel width to ensure all buttons are exactly the same size (for example 150px).

For full width buttons, update the percentage to 95-100%.

Thanks for reading!

Did this tutorial help? Consider buying me a coffee as thanks! 🥰

Use discount code STYLEDSQUARE10 to save 10% off your Squarespace Subscription!

* Disclaimer: This post contains affiliate links. If you purchase through our links, we may earn a small commission at no extra cost to you. We only ever recommend tools we genuinely use and love.

More tutorials

Blog