Gradient Buttons on Squarespace: CSS Tutorial
Flat color buttons work, but they rarely stand out on a page full of competing elements. Gradient buttons introduce depth and a touch of sophistication, and for brands leaning on strong calls to action, that small shift in visual weight can make the difference in where a visitor's eye lands first.
Table of contents
Add gradient buttons to your Squarespace site
What are gradient buttons in Squarespace
How to create gradient buttons on Squarespace
How gradient buttons work for visitors
Why use gradient buttons
FAQ
1. Add gradient buttons to your Squarespace site
Gradient buttons blend multiple color tones smoothly across the background instead of relying on a single solid color, giving otherwise flat calls to action a sense of depth.
2. What are gradient buttons in Squarespace
We use gradient buttons most often to emphasize primary calls to action, create modern hero section buttons, and reinforce dynamic brand identities that a flat color alone can't capture, much as a button shadow effect adds depth through light rather than color.
3. How to create gradient buttons on Squarespace
Step 1: Open the Custom CSS panel
Log into your Squarespace account.
Open your website dashboard.
Click Pages.
Scroll down and select "Custom CSS" under "Custom Code."
Step 2: Add the gradient button CSS
// Gradient buttons - Typza.com //
.sqs-button-element--primary, a.sqs-block-button-element--primary { background: linear-gradient(90deg, #166FD4 10%, #0f5aa8 50%, #123643 100%) !important; color: #ffffff !important; transition: opacity 0.3s ease; }
.sqs-button-element--primary:hover, a.sqs-block-button-element--primary:hover { opacity: 0.9; }
This applies a horizontal gradient, forces white text, adds a smooth opacity transition, and slightly dims the button on hover.
Step 3: Save and test
Click Save and review the buttons across hero sections, forms, and pricing pages, then test mobile responsiveness.
Step 4: Customize the gradient
Adjust the values inside linear-gradient(90deg, color1, color2, color3). Try alternative angles like 135deg for a diagonal gradient, adjust the color stop percentages, or simplify to just two colors. Whatever you land on, verify the text stays accessible against the background.
4. How gradient buttons work for visitors
Gradients increase visual prominence by naturally drawing the eye, differentiating primary actions from everything else on the page, reinforcing quality perception, and making conversion points feel intentional rather than accidental.
5. Why use gradient buttons
Strategic use elevates brand sophistication, creates stronger visual contrast, reinforces modern positioning, and increases perceived value, the same subtle polish a button scale up hover effect brings to a call to action, though improper use risks inconsistent behavior and accessibility issues.
The bottom line
A gradient button costs you nothing in load time and gives a flat CTA real depth and modern polish, but the effect only works if you check text contrast against every color stop, not just the average. Done right, it's one of the fastest ways to make a template feel custom rather than off-the-shelf. Done carelessly, it's an accessibility problem hiding behind good intentions.
FAQ
What are gradient buttons and how do they differ from flat buttons?
Gradient buttons use a linear-gradient background that blends two or more colors across the button, rather than a single flat fill, adding visual depth and a more modern feel.
How do I control the angle of a gradient button in CSS?
The linear-gradient() function takes a angle value (like 90deg or 135deg) as its first argument, which determines the direction the colors blend across the button.
Can I animate a gradient on hover?
Yes, common approaches include shifting the gradient's background-position on hover or changing the opacity/color stops, both of which need a transition property to animate smoothly.
Do gradient buttons cause accessibility issues?
They can, if the text color doesn't have sufficient contrast against every part of the gradient, not just its darkest or lightest point, so each color stop should be checked against WCAG contrast ratios.
Will gradient buttons work with Squarespace's built-in button styles?
Yes, you can override the background property of any built-in button class with a custom gradient via Custom CSS without affecting the button's shape or spacing.
More insights
