How to Change the Color of a Single Button in Squarespace
Change the color of a single button in Squarespace with CSS
Customizing buttons using Squarespace’s native features is super easy. But what if you have a special promotion or event or ‘who knows what’ that you want to highlight?
You already know how important it is to use the same color and text on your respective CTAs on your website, and this one needs to be different.
In this blog post tutorial, I show you how easy it is to change the color of a single button in Squarespace using CSS.
How to Change the Color of a Single Button in Squarespace
In Squarespace, we already have a few options for customizing our buttons. I'm going to show you what to do when none of these options are going to work for you.
You're going to go to a Website > Website tools > Custom CSS
Copy and paste the code below (scroll down)
For this next step, you're going to need the Squarespace ID finder Chrome extension installed in your Chrome browser
Select the ID Finder from your Chrome browser and locate the block ID of the button for which you want to change the color and select it
Go back to the CSS you just pasted, highlight, highlight ‘BLOCK ID GOES HERE,’ and paste
Change the hex codes to match your brand colors
If you don’t need a border, just delete that line from CSS
So easy, right?
CSS Code Snippet to Change the Color of a Single Button in SquarespaceChange Color
/* Change button color of a single button */
BLOCK ID GOES HERE a {
background: #ffcfcf;
color: #46361A;
border: #46361A
}
Was this helpful?
What are you going to use this for? Did you know that you want your CTAs to be consistent throughout your website so your visitors won’t get confused? Share your thoughts in the comments 👇
This page contains affiliate links
My Insta
@jenxwebdesign
Like this post?
