How to create gradient buttons in Squarespace

content block

Jun 24

If you’ve ever wanted to add a colorful gradient background to a button on your Squarespace site, thsi is the tutorial for you. In the video below, I’ll walk you through how to use just a little bit of custom CSS to create a bold gradient button, and you can apply it to all your buttons, or one section or one button at a time!

Watch the tutorial to see exactly how to write the code, find the block or section ID, and paste it into your Custom CSS panel. Then scroll down to grab the code snippets and check out the free bonus gradient guide to create your own colorful combos.

How to Add a Gradient Background to Buttons in Squarespace

You can use this technique to style all buttons site-wide, or just a specific one, using Squarespace’s built-in structure and a bit of custom CSS.

✅ Step-by-Step Instructions

Step 1: Open the Custom CSS panel
From your Squarespace dashboard:

Click Pages
Then scroll and click Custom CSS under the Design or Custom Code section
Or just press the forward slash / key to search “Custom CSS” directly!

Step 2: Paste in your gradient code
Use the following CSS to apply a gradient to all buttons:

/* simple gradient button from insidethesquare.co */ 
.sqs-block-button-element {
  background: linear-gradient(to right, red, purple) !important;
}

You can swap the color values to anything you’d like—just make sure to keep the !important tag so it overrides default styles.

Step 3: Preview the changes
Check your header button, primary/secondary buttons, and list buttons. They should all now show your gradient background.

🎯 Want to Target Just One Button?

You can change one button content block at a time if you use it’s block ID! In the tutorial above, I used this free chrome extension to easily grab the block id. Update the filler text in this code with the unique number for your button content bock.

/* one gradient button from insidethesquare.co */ 
#block-INSERTID .sqs-block-button-element {
  background: linear-gradient(to right, red, purple) !important;
}

For things like a People section or collection list, where individual buttons don’t have unique block IDs, use the data section ID instead.

Turn on the Squarespace ID Finder extension again
Copy the section ID (example: [data-section-id="62cc2abc3fa27b2d289a90e2"])
Use this CSS:

/* one section gradient button from insidethesquare.co */ 
[data-section-id="INSERTID"] .sqs-block-button-element {
  background: linear-gradient(to right, red, purple) !important;
}