How to Create Custom Gradient Buttons in Squarespace Using CSS and Eyedropper Tool

Custom buttons on a Squarespace website are like the cherry on a very expensive cake. Get them right, and they instantly lift the design. If you stick with the defaults, your site looks like every other Squarespace launch from the past decade. There’s nothing wrong with the out-of-the-box buttons, but if you care about memorable design (and let's be honest, you wouldn’t be here otherwise), then standing out matters.

This guide is for anyone who’s wanted to inject real personality into their Squarespace buttons but has always felt slightly thwarted by the “customise” panel’s limited options. I’m talking specifically about gradients: shifting colour fields that add visual punch and can, when handled with care, bring a site right up to date.

Here’s how to get your hands dirty with custom CSS, pick the perfect colours from your own site, and apply the look step by step with practical tips and hard-earned know-how. I’ll also share some pitfalls, handy tricks, and help you avoid the kind of rookie mistakes I see all too often.

Why This Matters

Imagine spending hours tweaking your homepage layout, finessing every piece of copy, and finally launching a site, only for it to underwhelm because the main call-to-action looks the same as everyone else’s. Buttons are the handshake of your website. They draw attention, signal importance, and set the tone for what’s next. If your CTA (“Book Now”, “Buy”, “Enquire”) blends in, you might as well hang a “Do not disturb” sign on your homepage.

Cookie-cutter buttons waste opportunity. You lose out on conversions, attention, and that all-important brand personality. Plain buttons can also make entire sections look unfinished—a common complaint I hear from clients who wonder why their pages lack ‘pop’. With users’ web expectations skyrocketing, second-rate design can quietly cost you money, leads, or credibility.

Squarespace’s built-in button options scratch the surface, but there are limits that prevent tweaking key details like gradients that use your precise palette or subtle hover effects that signal interactivity. Jumping the fence into custom CSS and using your own colours (popularly with an eyedropper tool) lets you stamp your identity on every button, without needing to be a fully fledged developer.

Common Pitfalls

Chasing unique design is valid, but most people trip over the same problems:

• Assuming you’re stuck with default settings: The first instinct is to trawl through every style panel and colour picker, only to discover that gradients remain off-limits unless you crack open the CSS editor.
• Wrong button targeted: Squarespace has primary, secondary and tertiary button styles, each with their own selectors. Miss this, and you either change nothing, or, more frustratingly, break everything at once.
• Using close-enough colours: Eye-balling it (“This shade of red will do”) leads to jarring buttons that fight with your site’s true palette. If you want it matched, pick it up from your own site assets.
• Paste and pray CSS: Copying code and dumping it anywhere in the CSS panel, only to find the effect is either global (wrecking secondary or other buttons by mistake), or doesn’t appear at all on the intended button.
• Forgetting about button states: Buttons behave differently on hover or click. Only styling the ‘default’ leaves you with abrupt or inconsistent feedback for users.

Based on many client experiences, two minutes of targeted setup saves an hour of headaches. The devil is in the details.

Step-by-Step Fix

Let’s turn theory into practical results. Here’s how you craft custom gradient buttons in Squarespace, even if your coding knowledge is basically “that’s a hash symbol, right?” I’ll show the exact method I use, including how to sample colours directly from your own site. No need to settle for “kind-of matches”.

Step 1: Decide Which Buttons You Want to Customise

Before you begin, decide whether you want all primary buttons on your site to carry your gradient style, or only individual buttons here and there. Squarespace splits its buttons into three types:

• Primary: Your big, bold CTAs.
• Secondary: For secondary actions, such as “Learn more”.
• Tertiary: Gentle suggestions, like “Cancel” or “See terms”.

Each has its own class. You don’t want to paint every button red if your checkout page uses secondary or tertiary for vital links.

Step 2: Using an Eyedropper Tool to Extract Your Colours

Nothing dates a site faster than mismatched colours. For genuinely harmonious gradients, use your own palette. Most browsers and image editors have some kind of eyedropper tool that lets you click anywhere and copy an exact colour value.

How to do it:

1. Load your live website in Chrome.
2. Use the free ‘ColorZilla’ or ‘Eye Dropper’ extension (for Chrome/Firefox), or even your device’s built-in colour picker.
3. Activate the eyedropper, click the exact spot (logo, header background, feature image, etc.) and copy the provided hex code (looks like #CD2100).

If you want to make a gradient, repeat the process with two or more brand colours, or pick harmonious shades from across your design.

Step 3: Identify the Correct Button or Block ID

This bit is crucial. You can target buttons by type (primary/secondary/tertiary) or, if you want a one-off treatment, by targeting a specific block. Here’s how to find the selector or block ID:

1. In Chrome, right-click on the exact button you want to customise.
2. Click ‘Inspect’. You’ll see a wall of code; don’t break out in a cold sweat.
3. Look for the class: .sqs-button-element--primary, .sqs-button-element--secondary, or .sqs-button-element--tertiary.
4. If you want to hit just one button, find the parent div above it: it will usually have an ID like #block-2cca316b118e59d7f612.

Step 4: Write and Apply Your Custom Gradient CSS

Here you can shape your creative vision. Open your Squarespace site admin and do the following:

1. Go to Design > Custom CSS.
2. Paste the following code, swapping out the gradient colours for those you grabbed earlier with your eyedropper.

/* Custom Gradient for Primary Buttons */
.sqs-button-element--primary {
  background-image: linear-gradient(92.88deg, #CD2100 9.16%, #cc0000 43.89%, #d3132f 64.72%);
  color: #FFFFFF !important;
  flex-shrink: 0;
  text-shadow: rgba(0, 0, 0, 0.35) 0 3px 8px !important;
  transition: all .5s; 
}
.sqs-button-element--primary:hover {
  box-shadow: rgba(0, 0, 0, 0.4) 0 1px 30px;
  transition-duration: .1s;
}

What’s Happening Here?

• background-image: linear-gradient(...): Creates the gradient.
• color: #FFFFFF !important;: Forces white text, superb for contrast.
• text-shadow: Adds subtle lift, making text readable over vibrant backgrounds.
• transition: Smooths any state changes so things fade, never jump.
• On hover, a soft shadow appears, giving a tactile feel.

If you’re customising one button only, use the block ID plus the button type, like:

#block-2cca316b118e59d7f612 .sqs-button-element--primary {
  /* your gradient styles here */
}

Step 5: Check Your Work Across Devices

Gradients can look very different on mobile screens. Buttons may bleed beyond their boundaries or become hard to read if the text size is out of sync.

Use Squarespace’s built-in device preview (found in the site editor) to check how your new buttons look on phones and tablets. If colours feel too loud or readability suffers, tweak your darkest and lightest shades for better mid-tone balance.

Step 6: Fine-Tuning and Hover State Tweaks

A gradient works only as well as its weakest state. Updating the default style alone often leaves a clunky or inconsistent effect when a user hovers over the button. You can polish your button with a satisfying interaction by doing the following:

• Adjust the hover state background, box-shadow, or text colour for extra feedback.
• Try a slightly brighter or more saturated version of your original colours upon hover, for example:

.sqs-button-element--primary:hover {
  background-image: linear-gradient(92.88deg, #d03100 9.16%, #ee2100 43.89%, #ec5d5e 64.72%);
  box-shadow: rgba(0, 0, 0, 0.4) 0 2px 12px;
  transition-duration: .1s;
}

• For bolder changes, keep fallbacks for accessibility so that text remains high contrast, and ensure clear focus styles for keyboard navigation.

What Most People Miss

There’s a subtle art to getting gradients right. The biggest difference between “that looks designed” and “my nephew made this” comes from using the right colours and in showing restraint. Relying on generic gradient generators or random Pinterest boards often produces mediocre results. Your site will look more cohesive if you curate site-specific tones with the eyedropper and tweak until the blend is just right.

Another pro habit is version control. Implement changes block by block before rolling them out globally. This method prevents unforeseen clashes on different pages and makes corrections easier if you change themes or palettes down the line.

Most people also overlook how CSS specificity works. If your code doesn’t seem to work, check twice that your selector matches the button type and block. Many clients have spent an hour wondering why nothing happens, only to discover a missing hyphen.

External plugins or so-called “helper” CSS sites often promise one-click solutions, but these rarely provide the nuanced control available with a few lines of custom CSS using your actual palette.

The Bigger Picture

Custom gradients do more than decorate—they demonstrate attention to detail and communicate brand personality to your site visitors. Successfully creating distinctive buttons reflects an investment in your brand and shows you care about every detail. These touches boost perceived professionalism, builder expertise, and can improve call-to-action conversion rates.

Learning to work with CSS and select colours like a designer opens up more advanced possibilities over time. With each new skill, you gain greater independence from third-party plugins and can respond to new design needs more effectively.

Time spent learning these practical techniques pays off with quicker site launches, fewer design blockages, and a more enjoyable creative process.

Wrap-Up

To recap: picking custom gradient buttons allows you to take greater control over your site’s visuals.

• Identify which button(s) you want to upgrade.
• Use an eyedropper to extract precise colours from your palette or imagery.
• Find the right selector or block ID via Chrome Inspect.
• Write and paste your CSS, adapting the provided template for your colours and button states.
• Check your work across devices.
• Fine-tune hover/active states for a polished, interactive experience.

A handful of lines, an eye for colour, and a bit of testing, and suddenly your site buttons go from “fine” to “memorable”.

If you have questions or want to share results, I’d love to hear how your buttons turned out (bonus points for bold choices or accidental disco gradients).

For more practical tutorials and expert systems, join Pixelhaze Academy for free at https://www.pixelhaze.academy/membership.