How to create buttons with equal width in Squarespace

Buttons are a key part of any website's design — they guide your visitors toward taking action. By default, Squarespace buttons size themselves based on the length of their text. This can lead to inconsistently sized buttons, which might not look visually balanced — especially when displayed side by side.

In this tutorial, we’ll show you how to create buttons with equal width in Squarespace using custom CSS. This technique works well for calls-to-action, pricing tables, multi-column layouts, and anywhere you want a clean, consistent button look.

Table of Contents

• Why Use Equal Width Buttons

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Use Equal Width Buttons?

Here’s why equal-width buttons can improve your site:

• Creates visual consistency across your layout

• Enhances user experience by giving buttons equal importance

• Looks clean and professional on all devices

• Keeps multi-button layouts aligned

Complexity: Easy

---

Step-by-Step Instructions

The code below ensures all the buttons on the site will be 150px. Note that the width can be adjusted in (px), percentage (75%) or viewport width (12vw).

Step 1: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the appropriate code into the Custom CSS editor box.

.sqs-block-button-element {width: 150px} - Pixel

.sqs-block-button-element {width: 75%}  - Percentage

.sqs-block-button-element {width: 12vw)} - Viewport Width

To target particular button sizes which in this case are small, medium and large, simply use the following codes:

/* Option 1 */
Small -> .sqs-block-button-element--primary {width: 150px}
Medium -> .sqs-block-button-element--secondary {width: 150px}
Large -> .sqs-block-button-element--tertiary {width: 150px}

/* Option 2 */
Small -> .sqs-block-button-element--small {width: 150px}
Medium -> .sqs-block-button-element--medium {width: 150px}
Large -> .sqs-block-button-element--large {width: 150px}

To apply this for the mobile version only use the code below. I suggest using the percentage option here.

@media only screen and (max-width:640px) { 
  .sqs-block-button-element {width: 75%}
}

---

Key Takeaways

• Equal width buttons help align and unify your layout

• You can target all buttons or apply styles individually using custom classes

• Use fixed width (200px) or full width (100%) depending on your design needs

• Squarespace doesn’t offer this natively — custom CSS is required

FAQs

Q: Will this work on mobile devices?
A: Yes. Just make sure to use responsive widths like 100% or add media queries to adjust the width on smaller screens.

Q: Can I center multiple buttons side by side?
A: Yes. Use inline-block with equal widths and wrap them in a flex container or use text-align: center.

Q: What’s the best width to use?
A: A common starting point is 150px, but you can test and adjust to fit your design.

---

---

Conclusion

A small design tweak like equal-width buttons can make a big difference in how professional your site looks. Whether you’re designing a landing page, services section, or call-to-action banner, consistent buttons help build trust and guide your visitors more effectively.

All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of merchantability and warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a Developer.