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:

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%.

More tutorials