How to change button packs or style them.
How to Change Button Packs or Style Buttons in Squarespace
Buttons are one of the most important design elements on your website—they guide your visitors to take action, like “Buy Now”, “Get in Touch”, or “Learn More.” In Squarespace, you can easily change the look and feel of your buttons using built-in button packs and styling options.
Here’s how to do it:
1. Open the Site Styles Panel
Start by entering Edit Mode on any page.
Then:
Click the paintbrush icon in the top-right corner of the editor.
This opens the Site Styles panel where you can customize fonts, colors, spacing—and buttons.
2. Scroll Down to the “Buttons” Section
In the Site Styles panel, scroll down and find the “Buttons” section.
Here, you’ll see:
Button Style (Solid, Outline, or Minimal)
Font Size, Letter Spacing, and Text Transform
Border Radius (for rounded or square corners)
Padding and Alignment
3. Change the Button Pack (Optional)
Some Squarespace templates allow you to choose from different button packs, which control how buttons behave across your site.
To change the pack:
Go to Design > Button Packs
Choose from preset styles or use Custom Pack to design your own
Note: This option might not be available on all templates—only those that support Fluid Engine or custom styling packs.
4. Customize Button Colors
To change button colors:
In Site Styles, go to Colors
Select the theme your button uses (e.g. Light, Dark, Accent)
Adjust the background color, hover color, and text color of buttons in that theme
This ensures your buttons stay consistent across your entire website.
5. Preview and Save
Once you've styled your buttons the way you want:
Click Save in the top-left corner
Then preview the buttons on both desktop and mobile to make sure they look great across devices
