Step-by-Step Guide to Customizing Your Squarespace 7.1 Buttons

When designing a website on any platform, one of the most important design elements is having a call-to-action that stands out and makes people want to take action. Usually designers do this with buttons because visitors understand what a button is and what is going to happen when they click.

Changing the default button styles

The default styling of all buttons in Squarespace is a solid rectangle with contrasting text. All 3 buttons types (primary, secondary, and tertiary) are set to be the same except for the font size.

Unfortunately, this doesn’t reflect the best way to use buttons on your website.

Here is how I like to set up my button styles:

1. Primary: Use for the main call to action throughout your website. This will be the boldest color that will stand out from any background color or image. I like to have the color be the same no matter the section background when possible.

2. Secondary: Use for other calls to action like newsletter sign-ups or going to another page. This will be a more neutral color.

3. Tertiary: Use when you have a section with multiple calls to action such as the Choose Your Own Adventure section. This will be an outline instead of a solid color so it doesn’t stand out and cause confusion over which is most important.

Setting up your button design

To edit the button design throughout the site, you’ll need to change the Site Styles.

1. Click on Site Styles

2. Click on Buttons

3. Set the shape, font, and size for each button type

4. Save your changes

A few tips when designing your buttons:

• Make sure that the color contrast is high enough between the background color and text. You can use WebAIM’s Contrast Checker to make sure the color combination meets WCAG guidelines.

• Choose “Capitalize” or “Sentence case” for your button text instead of having them be all lower or uppercase. This is easier for people with learning differences to read.

• The best buttons colors are the brightest option in your color palette, usually a yellow, orange, or red. While you won’t use this color in many other places on your site, having a bright color will help your buttons stand out and get more people to click on them.

• Use clear language in your call to action. Instead of saying “Learn More,” you can say “Learn more about working together.” This allows people and screenreaders to better understand what happens when they click the button and means that your buttons don’t all have the same copy.