How to Change Button Colors in Squarespace: A Simple Guide
Want to make your website pop with custom button colors? Whether you’re looking to match your branding or just add a little personal flair, customizing button colors on Squarespace is a great way to make your site stand out. And the good news is, it’s pretty straightforward once you know where to look.
In this post, I’ll walk you through how to change button colors on your Squarespace website and explain why Squarespace has placed this feature in a somewhat hidden spot.
Watch the video
Check out the YouTube video below. 👇🏼
Why Customize Button Colors?
Buttons are an essential part of any website. They guide users to take action, whether it’s signing up for a newsletter, making a purchase, or simply navigating to another page. Customizing your button colors ensures they align with your brand and help create a seamless user experience. Plus, eye-catching buttons can increase engagement and conversions.
Step-by-Step Guide to Changing Button Colors on Squarespace
Step 1: Access Your Site Styles
Start by logging into your Squarespace dashboard and then navigating to your website. Once you’re in, head to the page you want to edit and click on the paintbrush button at the top-right of the page.
This will take you to your site’s style settings, where you can customize a variety of elements.
Step 2: Navigate to Colors Settings
Inside the Site Styles menu is where all of your styling options live, including font choices, colors, and spacing.
Scroll down until you find the section for colors. This should be the third option from the top and you will click the arrow to the right of the color palette.
Step 3: Determine which Color Theme to Edit
Once you’re in the colors settings, you’ll see blocks pop up on the right side of each section of the page that you are on which tell the color theme that each section is using. This is how you will know which color theme that you need to edit.
Click on the corresponding color theme for the section that your buttons are located in.
Step 4: Customize Button Colors
Find the color theme your section is using (e.g., 'Lightest') and scroll down to the “Buttons” section. Here, you’ll be able to customize the background and text colors for your primary, secondary, and tertiary buttons.
You can either select colors from your preset palette or click “Custom” to choose any color using the hex code or color picker.
Step 5: Preview and Save
As you adjust the button colors, you’ll see a live preview on your site. Once you’re happy with how your buttons look, don’t forget to click “Save” to apply the changes.
Why Is This Setting in the Colors Tab?
While you might expect button color settings to be in the “Buttons” section of Site Styles, Squarespace groups color changes under “Colors” because the buttons are tied to your site’s overall color theme. It can seem a little hidden at first, but it makes sense when you realize the buttons are part of the broader color scheme for your site.
Wrapping Up
That’s it! Changing button colors in Squarespace is easy once you know where to look. By customizing your buttons, you can ensure they align with your brand and stand out to visitors, encouraging them to take action.
📨 Join my mailing list to get Squarespace tips & tricks right in your inbox
Your designer
I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.
