How to Change Button Color in Squarespace 7.1 (2024 Update)

Did you know that the default button color on your Squarespace site depends on the template you choose?

While this might work perfectly fine for your website, you might want to opt for a different color. For example, a shade that matches your brand identity or something more vivid that encourages people to click.

Here’s my simple guide on how to change the button color in Squarespace in four steps. No coding required!

Not sure how to add a button to your website? Here’s how to get started

How to change the button color in Squarespace

Now, let’s see how Squarespace lets you change your button color.

Step 1: Go to the styling menu

Go to any page on your website and click Edit. We recommend using a page that has a button you want to change the color of on it so that you can see how it will look.

Next, go to the top-right-hand corner of the page and click on the paintbrush button. This will take you to the Site Styles menu.

Click on the Colors box. You might think you need to click on the Buttons box. However while you can change the shape and size of your buttons here, you can’t change the color!

Step 2: Edit your button

When you’re in the Colors menu, you’ll see a list of all the different color themes in use on your website, as well as the ones in use on the page you’re on.

Top tip: Not sure what theme a section of your site uses? You can find out by clicking out of the styling menu and clicking on the section you want to amend.

Click on the Edit section button, and go to Colors. You’ll see a pencil next to the color theme that’s in use.

When you’re in the Colors menu, choose the color theme you want to edit. You will then be able to edit all aspects of the color theme. Scroll down to the Button section.

Here you’ll be able to edit the colors of the primary, secondary, and tertiary buttons, as well as the button text.

Click on the relevant button to access the color picker. You can pick a color from the existing color palette or choose your own custom color.

Step 3: Test your colors

When you’ve chosen your button colors, click out of the styling menu and check that your new button colors look okay. If you need to make more tweaks, just pop back into the styling menu and make changes.

Remember that having clear and legible text on your button is essential. As a rule of thumb, if you have a dark button, use light colored text, and vice versa. You can check the contrast of your button and text on the WebAim website.

And that’s it! It’s that easy to change your button colors in Squarespace!

Step 4: Style your Squarespace buttons

Good buttons aren’t just about the color. You want to make them exciting and engaging in order to encourage people to click and convert.

If you want your buttons to stand out from the rest, Spark Plugin is a must-have. With over 100 fantastic customizations, you can style every element of your website, from the header to the footer.

Here are five cool button customizations to get you started.

1. Make your button hover

Did you know you can make your Squarespace buttons move?

Our collection of animated attention-seeking buttons will give your web visitors a gentle nudge towards buying your products or signing up for your newsletter!

2. Add a gradient

If you can’t choose between two colors, why not have both? This animated gradient cycles through your colors of choice, enticing visitors to get clicking.

3. Turn your button see-through

If you’ve got a bright background or are a fan of the Apple-esque minimalist design style, you’ll love our Glassmorphism button.

4. Use a shadow

Sometimes, the simplest design tweaks are the best. This customization adds a shadow to your button, creating depth and drawing the eye.

5. Throw on some snow!

Feeling festive? This Christmassy customization adds a flurry of snow to your buttons.

It’s fantastic if you want to get site visitors in the holiday mood or even if you just like celebrating December all year round!

How do Squarespace buttons work?

You have three different button styles in Squarespace – primary, secondary, and tertiary.

Some button types are set in stone across your site. For example, your add-to-cart buttons, checkout buttons, and donation buttons are the primary type by default.

However, you can set your header buttons, form blocks, and button blocks to use any type of button style. You can toggle the type of button you want to show in edit mode.

Your primary, secondary, and tertiary button colors will also depend on the color themes you use on your pages.

For example, if you have a button on a light background, you can have a dark button color that stands out, and vice versa for a light button on a dark background.

It’s also important to remember that any changes you make to your buttons automatically roll out to all buttons in use on your website.

You’ll want to bear all this in mind when deciding what colors you want your different buttons to be.