How to Create Custom Gradient Buttons in Squarespace Using CSS and Eyedropper Tool

In this Squarespace CSS tutorial, Elwyn will show you how to apply gradient effects to Squarespace buttons using only CSS and an eyedropper tool. This method works with Squarespace 7.1 and the new Fluid Engine, so you can create custom gradient button designs that perfectly match your website's theme.

Gradient buttons for Squarespace 7.1 and Fluid Engine!

Are you looking to add some extra flair to your Squarespace website? Look no further! In this tutorial, we'll show you how to use CSS with button IDs to create custom gradient button designs in Squarespace. By the end of this video, you'll be able to create custom button designs that will perfectly match your website's theme.

First things first, let's go over what a button ID is. A button ID is a unique identifier that Squarespace uses to differentiate between different types of buttons. There are three types of button IDs in Squarespace:

• Primary: This is the default button style used throughout your site.

• Secondary: This is a secondary button style used for less important actions.

• Tertiary: This is a tertiary button style used for even less important actions.

Now that you understand what a button ID is, let's get started on creating a custom gradient button using CSS.

Step 1: Find the Button ID

To create a custom gradient button, you'll need to first find the button ID that you want to customize. To do this, you can use a Squarespace block identifier, such as the Chrome plugin. Simply hover over the button you want to customize, right-click, and select "Inspect." This will bring up the Chrome DevTools panel, where you can see the button's ID.

Step 2: Add CSS Code

Once you have the button ID, it's time to add the CSS code to customize the button's design. In this tutorial, we'll be using the primary button ID to create a gradient effect. Here's the CSS code you can use:

/* Button Styles - Primary */ 

.sqs-button-element--primary { 
background-image: linear-gradient(92.88deg, #CD2100 9.16%, #cc0000 43.89%, #d3132f 64.72%); 
color: #FFFFFF !important; flex-shrink: 0; 
text-shadow: rgba(0, 0, 0, 0.35) 0 3px 8px !important; 
transition: all .5s; } 

.sqs-button-element--primary:hover { 
box-shadow: rgba(0, 0, 0, 0.4) 0 1px 30px; 
transition-duration: .1s; }

This code will create a gradient effect on the primary button. You can adjust the gradient colours by changing the hex values in the background-image property.

Step 3: Apply the CSS Code

To apply the CSS code, add it to the CSS editor in Squarespace. You can access the CSS editor by going to Design > Custom CSS.

If you want to apply the custom gradient effect to a specific button block, use the button's unique ID in the CSS selector. Here's an example using a Squarespace block identifier to access an individual block:

#block-2cca316b118e59d7f612 .sqs-button-element--primary:hover { 
box-shadow: rgba(0, 0, 0, 0.0) 0 1px 30px; }

Replace the block ID with the ID of the button block you want to customize.

And that's it! By following these steps, you can create custom gradient button designs that will look great on your Squarespace website.

Happy designing!