How to create gradient buttons in Squarespace

This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

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, but make sure you watch this tutorial first so you can see what aspects of them you’ll want to change.

Here are the selectors for standard buttons: 

/* All button blocks */

.sqs-block-button-element

/* Primary Buttons */

.sqs-button-element--primary

/* Secondary Buttons */

.sqs-button-element--secondary 

/* Tertiary Buttons */ 

.sqs-button-element--tertiary

Here is the gradient code I used for the primary button:

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

Here is the code I used for the tertiary button that has the gradient flip hover effect!

.sqs-button-element--tertiary{
background: #007991;
background: -webkit-linear-gradient(to right, #78ffd6, #007991);
background: linear-gradient(to right, #78ffd6, #007991);
}

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

---

Free Guide to Gradients

Enter your email below for access to 30+ free gradient codes & step-by-step info on how to use them to customize your Squarespace website!

Here is a link to the free Chrome extension used in the video; I am a fan, but not affiliated with this extension or its creators.