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:

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

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.