pagekits logo

How To Change The Button Color On Squarespace

September 21, 2022  /  
Change Button Color Squarespace

Many people use Squarespace to build their websites because it is user-friendly and has many built-in features. One thing you may want to customize on your Squarespace website is the button color. 

Buttons are essential in increasing website conversions because they are your call-to-actions, and they should pop out on a web page and encourage your customers to click on them. Luckily, Squarespace provides an easy way to change button colors.

Types Of Squarespace Buttons 

Before you start changing button colors, you need to understand the four types of button blocks on Squarespace:

  • Stand-alone button block - quickly add to any page with the plus icon
  • Image layout with a button - choose from the five different image layouts that come with a button
  • Newsletter block with a button - standard setting to encourage customers to sign up
  • List section with a button - has different layout settings

These buttons inherit the same master settings you’ve set in the Design Menu. However, if you want specific site portions to have a different colored button, it’s simple to edit. 

Squarespace also assigns levels to help categorize buttons according to their importance. There are primary, secondary, and tertiary buttons, and you determine which belongs to which level.

Changing The Button Color

Here’s a step-by-step guide to changing your button colors on Squarespace:

Squarespace 7.1

If you’re working with Squarespace 7.1, changing button colors is straightforward:

  1. Go to Design > Site Styles. 
  2. Look for Colors. You can set a Squarespace Color Palette in case you haven’t done so. 
  3. Choose a color theme. 
  4. Look for the Button block and change the color. Initially, the color assigned is part of the palette you’ve set, but you’re not limited to these colors only. You can change it to any color you want.
  5. Click Save, and that’s it. Check your page to see that the new button color has been applied.

Squarespace 7.0

If you’re working with Squarespace 7.0, you need to use site-wide tweaks to change the colors of your buttons, and this will affect all the site buttons and not just a particular button. 

  1. Navigate to the page with buttons.
  2. Click Design > Site Styles.
  3. Scroll down and look for Buttons. 
  4. Choose Button Color to change the background color. 
  5. Other options you can change are:
    • Button Text Color - changes the font color of the text inside the button
    • Alternate (or Overlay) - adjusts button colors to contrast with the background text or images. This option is helpful if you want to ensure the button automatically stands out
    • Button Style - Creates a solid, outlined, or raised look for the button. When using the outline option, the button text becomes black or white when hovered

Other Button Options You Can Change

Aside from changing the button colors, there are other things you can do to make them stand out. Squarespace recommends letting your buttons use global colors to make sure they match the overall web design. You don’t want to deviate too much from the standards unless you want to risk your website looking unpolished and unprofessional. 

Button Shape

You can choose oval, square, round, pill, underline, or petal. When selecting a shape, remember that the shape adjusts depending on the text you put inside. The button may not look as expected if you have written a long text. Squarespace recommends a maximum of 25 characters. 

Button Padding

You can change the horizontal (left and right) and the vertical (top and bottom) inner padding of the button. Inner padding refers to the space separating the text from the edges of the button. A properly balanced button helps draw the eyes to the text inside. 

Button Outline

You can control the outline of a button to make it stand out. For buttons without a background color, you can set the outline thickness. For buttons with background colors, changing the outline thickness affects the padding outside the button. 

Improve Website Conversions By Optimizing Your Buttons

Changing the button color and its properties on your Squarespace website is a simple way to customize the look of your site. Following the steps above, you can easily change the color to match your brand or aesthetic. 

However, remember that Squarespace has made it easy and intuitive for design styles to match and work together. The designers know how to create button styles that cohesively drive conversions. Be careful of veering away from these design styles, as you can harm your site rather than improve it. 

But don’t let this hamper your brand’s style and prevent you from experimenting. Sometimes, tweaking a button’s style or the text inside is all that’s required to achieve high conversions. 

For more informative articles about customizing your Squarespace site, check out this blog by Page Kits.

Was this article helpful?
YesNo
ABOUT THE AUTHOR

Comments are closed.

pagekits logo
Copyright © 2022 PageKits. All Rights Reserved.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram