How to Resize Buttons on Squarespace

When Squarespace introduced Fluid Engine, button customization saw a major upgrade. 

With enhanced control over size, alignment, and styling, you now have greater flexibility in designing your site’s buttons. 

However, many still struggle with button sizing and alignment issues, especially when text wraps awkwardly over two lines.

In this guide, I’ll show you how to properly edit and style buttons in Squarespace Fluid Engine to ensure they look great across all screen sizes.

Watch the video

Check out the YouTube video below 👇

Adding a Button in Squarespace Fluid Engine

Step 1: Insert a Button Block

1. Navigate to your Squarespace site.

2. Click "Add Block."

3. Select "Button" and place it within the relevant section.

Step 2: Customize the Button

• Add a Link: Double-click the button and enter your desired URL (e.g. /about).

• Change the Text: Instead of the default text, use a call-to-action like “Learn More About Us.”

Understanding Fit vs. Fill Button Styles

There are two styling options available, fit or fill. 

Fit Style (Recommended)

• Adjusts the button’s width to fit the text.

• Prevents text from stacking on smaller screens.

• Offers a sleek, minimal look.

• Best for maintaining button consistency across your site.

Fixing Text Wrapping Issues:

1. Select the "Fit" button style.

2. Extend the button width as needed to prevent text from wrapping.

3. Test responsiveness by resizing your browser window.

Fill Style

• Expands the button to fill its entire container.

• Provides more flexibility in button height and width.

• Useful for creating large, attention-grabbing buttons.

• May cause excessive stretching if not properly adjusted.

Avoiding Overstretching:

1. Select "Fill" if you need a larger button.

2. Adjust padding and width in Site Styles to prevent a distorted appearance.

3. Ensure it maintains a balanced size on all screen sizes.

Adjusting Button Styles in Site Styles

For consistent button styling across your site:

1. Navigate to Site Styles.

2. Choose Primary Button Style.

3. Set your padding for height and width.

4. Adjust shape settings (e.g. pill-shaped buttons for a rounded look).

Aligning Buttons Correctly

You can and should align your buttons, but with so many options, which alignment style should you pick?

Horizontal Alignment

• Left-aligned: Creates a structured, professional look.

• Centered: Best for standalone call-to-actions.

• Right-aligned: Works well for navigation menus.

Vertical Alignment

• Top: Aligns buttons with nearby text.

• Center: Keeps buttons balanced within their section.

• Bottom: Useful for aligning buttons at the bottom of a block.

---

📩 Join the inner circle to get exclusive code updates

---

Final Touches & Saving Your Design

Once your buttons are properly styled and aligned:

1. Click Save to apply changes.

2. Review your design on desktop and mobile views.

3. Ensure buttons are responsive and visually appealing.

Final Thoughts

By using the right button styles, adjusting site settings, and aligning buttons properly, you can enhance your Squarespace site’s design and usability.

---

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?