InsideTheSquare.co

View Original

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:

See this content in the original post

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

See this content in the original post

See this content in the original post

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.