How to create gradient buttons in Squarespace

content block

Sep 26

In this tutorial, we're taking your Squarespace site's design to the next level with the power of gradients!

You’ll learn how to create your own custom gradient buttons that will make your visitors say 'wow.'

Whether you're a beginner or an experienced Squarespace user, this tutorial is sure to add a little fun and flair to your website!

The codes that you’ll be working with are listed below. If you are new to custom CSS, check out the additional information at the end of this article.

Creating eye-catching gradient buttons might sound tricky, but there are only four things you’ll need in your code":

Button Type Identification: First things first, we'll identify our button type. If it's primary, secondary, or tertiary, you’ll find those below.
Solid Background Fallback: We'll start with a solid background color. This is our safety net – it ensures your buttons look great even if gradients aren't supported.
Webkit Linear Gradient: Next, we'll add a webkit linear gradient. This little trick helps our buttons look fabulous on older browsers. It's like giving your buttons a timeless style!
Standard Linear Gradient: Finally, we'll apply a standard linear gradient for modern browsers. This is where the magic really happens – smooth color transitions that catch the eye and elevate your design.

Sounds pretty easy when we break it down, doens’t it? You’ll find some sample codes below to help you get started. Here are the main selectors for standard button blocks:

Primary Buttons

.sqs-block-button-element--primary

Secondary Buttons

.sqs-block-button-element--secondary

Tertiary Buttons

.sqs-button-element--tertiary

/* gradient button */ 
.sqs-button-element--primary{
background: #414d0b;
background: -webkit-linear-gradient(to right, #a1d9dd, #414d0b);
background: linear-gradient(to right, #a1d9dd, #414d0b);
}

/* gradient flip on a hover */
.sqs-button-element--tertiary{
background: #007991;
background: -webkit-linear-gradient(to right, pink, #a1d9dd);
background: linear-gradient(to right, pink, #a1d9dd);
}

.sqs-button-element--tertiary:hover{
background: #007991;
background: -webkit-linear-gradient(to left, pink, #a1d9dd);
background: linear-gradient(to left, pink, #a1d9dd);
}