To change button color in Squarespace 7.1 (colour, for UK readers), open Site Styles (the paintbrush while editing a page), click Colors, click the pencil on the colour theme the section uses, and under Button change the background and text colour. That changes every button of that type in every section using that theme, which is what you want for a consistent site. Changing one button, the header button, or the hover colour takes a different route each, and a surprising number of “my button will not change colour” problems are simply the page using a different colour theme than the one you edited. All of it is below with the CSS for the cases the panel cannot handle.
How do you change button color in Squarespace 7.1 for every button?
- Edit any page and click the paintbrush icon to open Site Styles.
- Click Colors. You see up to ten colour themes (Lightest 1, Lightest 2, Light 1, Bright 1, Darkest 1 and so on); each section on your site uses one of them.
- Hover over the theme the section uses and click the pencil. Not sure which one? Edit the section and look at its Colors tab.
- Scroll to Button. Set Button Background and Button Text for Primary, Secondary and Tertiary buttons.
- Click Save. Repeat for any other theme in use.
Squarespace’s button styles guide confirms the split: shape, font, outline and padding live under Site Styles, Buttons, but colour lives under Colors, inside each theme. That split is why people change the shape successfully and cannot find the colour.
What are primary, secondary and tertiary buttons?
| Type | Used by | Default look |
|---|---|---|
| Primary | Button blocks set to Primary, header button, most form and commerce buttons | Solid fill in the theme’s accent colour |
| Secondary | Button blocks set to Secondary | Outline or a lighter fill |
| Tertiary | Button blocks set to Tertiary, some newsletter and product buttons | Text only or the lightest style |
Each button block has a Design tab where you pick the type. So the clean way to have two button colours on one page is not custom CSS: set the main call to action as Primary and the quieter one as Secondary, then colour each type once in the theme.
How do you change the colour of one button only?
Three options, from no code to code:
- Change its type. Edit the button block, Design tab, switch Primary to Secondary or Tertiary, and style that type in the theme. Free and reversible.
- Put it in a section with a different colour theme. Each section can use its own theme, so a Bright theme section gives its buttons the Bright button colours without touching the rest of the site.
- Custom CSS with the block ID. Right-click the button, Inspect, and copy the
id="block-…"value, then in Website, Website Tools, Custom CSS:
#block-YOUR-ID .sqs-block-button-element {
background-color: #F3500F !important;
color: #ffffff !important;
border-color: #F3500F !important;
}How do you change the header button colour?
The header button is styled with the header, not with the button blocks. Edit a page, hover over the header, click Edit Site Header, click the button, then Edit design: choose Primary, Secondary or Tertiary as its type, and it takes that type’s colours from whatever theme the header is using. If the header is set to a solid custom colour rather than a theme, the button colours come from the theme selected in the header’s own Color settings.
How do you change the button hover colour?
Squarespace has no hover colour setting; hover is CSS. Site-wide, for all primary buttons:
.sqs-button-element--primary:hover {
background-color: #222222 !important;
color: #ffffff !important;
transition: background-color 0.2s ease;
}Use .sqs-button-element--secondary and --tertiary for the other types. The same selectors give you a lift on hover (transform: translateY(-2px)) or an underline, and they are collected with the rest of the Squarespace CSS snippets on this site.
How do you change button colour on Squarespace 7.0?
Open Design, then Site Styles, and scroll to the Buttons section. The tweak names depend on the template family: Brine templates have Primary, Secondary and Tertiary button colour tweaks; older families have a single Button Color. There are no colour themes on 7.0, so a single change applies everywhere, and per-button colours need the block ID CSS above.
Why will the button colour not change?
| What you see | Cause | Fix |
|---|---|---|
| Changed the theme, button still the old colour | The section uses a different colour theme | Edit the section, Colors tab, see which theme it uses, edit that one |
| Some buttons changed, some did not | They are different button types | Check each block’s Design tab; colour each type |
| Form or newsletter button will not change | Those follow the block’s own colour settings on some layouts | Edit the form block, Design, and set its button colour there |
| Header button ignores the theme | Header uses a custom solid colour | Edit Site Header, Color, and choose the theme for the button |
| CSS does nothing | Missing !important, or wrong block ID | Add !important; confirm the ID with the Squarespace ID Finder extension |
| Colour changes in the editor but not on the live site | Not saved, or browser cache | Save, then hard refresh |
Button colour is one of the first things a visitor’s eye tests for consistency, which is why the theme-based method is worth the extra minute over one-off CSS: it keeps every button on a Squarespace website design matched when a new page is added a year later. The same block ID technique that colours a single button also builds the vertical line and styles the announcement bar.
Frequently asked questions
Edit a page, open Site Styles with the paintbrush, click Colors, click the pencil on the theme your section uses, and set Button Background and Button Text for Primary, Secondary and Tertiary. Save.
Almost always because the section uses a different colour theme from the one you edited. Edit the section, open its Colors tab to see the theme name, then edit that theme in Site Styles.
Switch that button to a different type (Secondary or Tertiary) in its Design tab and colour that type, put it in a section with its own colour theme, or target its block ID in Custom CSS.
Edit Site Header, click the button, click Edit design and choose Primary, Secondary or Tertiary. It then uses that type’s colours from the header’s colour theme.
Only with CSS. Add a rule for .sqs-button-element–primary:hover (or secondary, tertiary) in Website, Website Tools, Custom CSS with the background and text colour you want.
Design, Site Styles, in the Buttons section. Tweak names vary by template family; there are no colour themes on 7.0, so the change applies site-wide.
