How to change a button color in Squarespace

The short answer

To change every button, use Site Styles. It takes a minute and needs no code.

To change one button without changing the others, Squarespace has no setting. You add a few lines of custom CSS (the code that controls how a page looks). Both ways are below.

Change every button with Site Styles

1. Open your site in the Squarespace editor and click Edit on any page.
2. Open Site Styles (the paintbrush icon).
3. Choose Colors, then edit the color theme your section uses.
4. Find the Buttons settings and pick a new background color.
5. Click Save.

Every button in sections that use that color theme changes together. If that is what you want, you are done.

Change one button with custom CSS

Each block on a Squarespace page has its own ID, a long name starting with block-. Custom CSS can use that ID to style one button and leave the rest alone.

1. Open your live site in Chrome. Right-click the button and choose Inspect.
2. In the panel that opens, look just above the highlighted line for an id that starts with block-. Copy it.
3. In Squarespace, open the Pages panel, click Custom Code at the bottom, then Custom CSS.
4. Paste the code below. Replace the ID with yours and the color with the one you want.
5. Click Save.

#block-yui_3_17_2_1_1700000000000_1234 .sqs-block-button-element {
  background-color: #1a73e8;
}

The value after background-color is a hex code, a six-character name for a color. Any color picker will give you one.

Squarespace's own instructions for the Custom CSS panel are in its help article, Add custom CSS to your site.

The easier way: click the button and pick a color

The hard part of the steps above is finding the right ID and writing the code without a typo. NudgeCSS is a Chrome extension that does that part for you.

1. Install NudgeCSS and open your live site in Chrome. Use the public address, not the Squarespace editor.
2. Click the NudgeCSS icon, then click the button you want to change.
3. Open Appearance and choose a new Background color. The button changes on the page as you pick.
4. Click Export Changes, choose the CSS Patch tab, and click Copy to Clipboard.
5. Paste it into Squarespace's Custom CSS panel and click Save.
6. Open your live page in a private browser window to see the change.

Picking and previewing colors is free. Exporting the code is part of NudgeCSS Studio, which is $30, paid once. You can try the Studio editing tools free for 7 days before you decide.

Common questions