Attractive calls to action and clean, eye-catching design buttons can help you boost your conversion, whether you are selling online or want to collect an audience for your email list. It is necessary when you design your website to take care of how your website buttons look. That is what I will dive into in this guide. I will show you how to change button color in Squarespace and explain everything so you do not miss anything about buttons in Squarespace.
In this guide, I am focusing on showing you how to change button color in squarespace 7.1. If you don’t know which Squarespace version do you have, I recommend visiting this article how do i know what version of squarespace do i have, or if you’re thinking of switching from Squarespace 7.0 to 7.1, it’s a good option to get more advanced design options to Change Button Color In Squarespace .
You can find this article Style buttons in version 7.0 helpful from Squarespace to get to know how to change button color Squarespace version 7.0.
Let’s now dive into how to make attractive Squarespace buttons that will boost your conversion.
Before diving into how to change button color in Squarespace, let’s see how to add a button in squarespace. If you already know that and know how to add button in Squarespace and change the font and size of it, you can go directly to change button color in Squarespace.
how to add a button in squarespace
To add a button in Squarespace, while editing your website, choose the section that you want to add the button to and click on ADD BLOCK.
From Block options, choose Button.
Here you will see that the button is automatically set to the primary button type, and the design style is set to Fill.
To understand Squarespace button styles, Squarespace has 3 types of button styles: Primary, Secondary, and Tertiary. The difference between those types is that most buttons on your website follow primary style settings. this includes most of your site buttons, but you can vary the styles of button blocks throughout your site with secondary and tertiary settings.
When you add a button in squarespace website, it is automatically set to fill, which will take up the entire space of the content block that allows you to increase and decrease the size of the button as you want, while the fit option doesn’t affect the size of your button; instead, the increasing or decreasing of the size applies to the block itself. Take into consideration that the buttons that are set to fill disregard changing the padding settings when you want to style a button. I will dive into details about that later.
To change a button design to fill or fit, select the button that you want to change and click on The Edit Pencil Icon.
Click on Design, and you can choose the type of button style that you want: primary, secondary, or tertiary. and the design style Fill or Fit.
After adding a button in Squarespace, you need to style it by changing the button size and font that match your website style. I recommend visiting this article to learn more about changing Squarespace fonts, and if you are still confused about the font to choose for your Squarespace website, this article from Squarespace is helpful about that topic.
Custom button in Squarespace
In this topic, I will show you how to custom button in Squarespace and how to choose a button shape that encourages everyone visit your site to click on it.
To Custom a button on Squarespace while editing a page on your website, click on site styles.
Then click on > beside Buttons.
You can choose a style button from Squarespace button packs. Click on All Button Packs.
It will show you all Squarespace button packs that you can choose from. First, hover over the button style that you want, and it will show you how the design looks for all different button types Primary, Secondary, and Tertiary. To select the design, click on it, and then the button design style will apply to all button types on your site.
If you want to change a specific Squarespace button style with more design options, navigate back to the button under All Button Packs. Select the type of button that you want to style independently.
Keep that in mind when you edit the primary button style. It is the most used button on your site. Some blocks, like forums, allow you to choose which type of button to add.
If you want to change the button font, click on Font from your chosen button that you want to edit. You can also change the text style, size, and letter spacing.
In the shape option, you can choose a design shape for your button. Squarespace offers different shapes for each type of button, both in Fill and No Fill. Fill is a button with background color, and No Fill is the button background color applies to the outline and text, and fills the button on hover.
Here is how Squarespace button looks in Fill, Fill with Outline, and No Fill design.
You can customize the button outline from your chosen button design settings under shape.
After you choose the right style for your buttons, you need to customize your Squarespace button colors, and that’s what I will dive into in the next topic: How To Change Button Color In Squarespace:
Change Button Color In Squarespace
To change button color in Squarespace, click on Edit, then choose Site Styles, and click on > beside Colors.
Make sure that you are in the colors option, then select the section that you want to change its buttons colors or click on the theme color popup that appears on each section as this arrow points to in the image below.
Once you click on the section or the popup of the theme color search for Button, the type of button that you will change its color depends on which one you use for that section. Usually it will be a primary button. To change the button color, click on the color circle beside the button type name.
To Change Button Color In Squarespace you can choose one of your theme colors or a custom one. I recommend choosing a custom one, which you will have more options to change your button color. Make sure to choose a color that matches your website colors and is clear.
Take into consideration that the sections that share the same theme color will get the same button color.
Don’t forget to Changing as well, your button text color is important; choose a text color that appears clearly on your button.
Custom Button Color In Squarespace With CSS
To Change Button Color In Squarespace with CSS code go back to Squarespace dashboard and click on pages. Scroll down, and under Utilities, choose website tools and click on custom CSS.
In custom CSS, you can customize Squarespace button with CSS code in the white field. If you are a beginner or don’t know how to customize Squarespace button with CSS, I recommend hiring a professional website designer that can help you with that because you need to make sure that your CSS code is written correctly.
Change Squarespace Button Hover Color
Changing Squarespace button hover color is not available by default through the Style Editor for all button types. While you can change the base button colors as I explained in Change Button Color In Squarespace, the hover state often uses a preset behavior that can’t be customized unless you use custom CSS.
You can use this CSS codes to change Squarespace button hover color
Change hover color for all primary buttons
.sqs-button-element–primary:hover {
background-color: #ff6600 !important; (Replace #ff6600 with your desired hover color)
color: #ffffff !important; (change #ffffff to text color on hover)
}
For the secondary and tertiary buttons in the CSS code, change the word Primary to the type of button that you want to change, and all changes will apply to all the buttons on your website that are in that type.
Add Button to Header Squarespace
To add button to header Squarespace website while you are editing your website Hover over your website header and click on Edit Site Header.
And then Edit Design. from the layouts Choose the type of header that you want.
You might see the button on the header is unactivated; to solve that, click on your header and choose Add elements.
Then activate the button toggle to activaite the button. Learn with details how to add button to header Squarespace.
Usually your Squarespace website header will be a primary button, which means the design that will apply to your Squarespace button header is from the primary button style.
How to link A Button to a Page in Squarespace
One of the great ways to make your audience stay on your website is to redirect them to other pages on your Squarespace website and use buttons that link to other pages on your Squarespace website. This is a good way because buttons are a clear call to action and show more professionalism than a text link, which is what I will show here. How to link a button to a page in Squarespace easily.
To link a button to a page in Squarespace while you edit your Squarespace website page, select the button that you want to edit and click on the edit pencil icon.
Then choose Content and click on Attach Link. Under URL, put your Squarespace page link that you want to redirect people to. If you want to open that page in a new tab, activate open link in new tab toggle, which is something that I recommend you do so if the users want to go back to the current page, they can do it easily through the navigation tab.
That’s all about how to link a button to a page in Squarespace. Let’s see now how you can link a button to a section in Squarespace.
How to Link a Button to a Section in Squarespace
To link a button to a section in Squarespace, select the section that you want to link and click on Edit Section.
Select design and scroll down to Anchor Link. To name your section, don’t forget to use the # symbol before writing the section name, as you see in my example. I name my section #section1.
Thereafter, choose the button that you want to link to that section and follow the step that I explained about how to link a button to a page in Squarespace. In the attached link, instead of the page link, put the name of the section that you want to link to.
That’s all about this article. I dive into all topics that you might need to know not only about changing the button color in Squarespace. I hope you find the information helpful, and it helps you design and optimize your Squarespace buttons. I will leave more related posts that dive into more details about separate topics about SquareSpace, which you will find helpful while you are working on your SquareSpace website, and you are welcome to contact me if you want help or want me to work on or fix something on your website.
Best regards,