How to Make Your Buttons the Same Width on Squarespace

A personal pet peeve of mine when it comes to web design is buttons that are different sizes.

When I see two buttons next to each other but they’re different widths, I think it looks messy. 

What I usually do when designing websites therefore is use this small piece of custom code to keep all button widths the same.

It’s worth noting that if you use Fluid Engine you can do this easily without code, however if you’re like me and still use the classic editor from time to time then this is a good trick to have up your sleeve.

Watch the video

Check out the YouTube video below 👇

Navigate to Website > Website Tools > Custom CSS and input the following code into your custom CSS box:

.sqs-block-button-element--small, .sqs-block-button-element--medium, .sqs-block-button-element--large {

width: 120px !important;

}

This code is targeting all buttons (small, medium and large) and ensuring they all have the same width. You can, of course, have a play around with the width you choose for this depending on the design style you’re going for.

If you want a different width for different sized buttons, e.g. you want your small buttons to be 200px but want your medium and large buttons to be 250px, you just need to input those lines of code individually, like the example below.

.sqs-block-button-element--small {

width: 200px !important;

}

.sqs-block-button-element--medium, .sqs-block-button-element--large {

width: 250px !important;

}

---

📩 Join the inner circle to get exclusive code updates

---

Adding this code will also impact the buttons you add in Fluid Engine too. For your information, the small button code targets tertiary Fluid Engine buttons, medium targets primary buttons and large targets secondary Fluid Engine buttons.

You can play around with the width you want your buttons to be and once you’re happy, just hit save and you’ll have made all of your buttons the same width, creating a much cleaner and more appealing design style. 

---

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?