Add a Shadow to Buttons in Squarespace 7.0 & 7.1

Looking to add a little spice to your website? Adding a shadow to your buttons can be a subtle way to customize your website design and draw more attention to your CTAs. Plus, it’s super easy to do!

Just copy and paste some CSS, and your buttons can look like this:

But I don’t want to add shadows to ALL of my buttons…

Don’t worry! In this video tutorial I show you how to add a shadow to buttons across your website, on one page, or on one section. You can even add a shadow to just one button.

So…ready to add some fancy buttons to your Squarespace website? Watch the video below or keep reading for the full tutorial.

Create Your Shadow With a CSS Generator

The Box Shadow CSS Generator is a magic tool that allows you to test out button shadows. You can play around with the shadow spread radius, length, color, and other features. This can get a little bit addictive!

Adjust the sliders on the box shadow CSS generator until you achieve the look that you want. Then the CSS generator will generate the code for the button shadow settings you select.

The finished code will look something like this:

All that’s left to do is copy the code so you can add it to your Squarespace website!

Add the Shadow to Your Squarespace 7.1 Website

Ready to see these shadows pop up all over your website?

Open up the Custom CSS block under the Design tab in your Squarespace website. Then copy and paste the snippet of CSS below.

.sqs-block-button-element {  
  CSS CODE FROM GENERATOR HERE
}   

In between the brackets, paste the code created by the box shadow CSS generator. Check your website, and you will see that it is populated with shadows!

But…what if you don’t want to have button shadows across your entire website? Keep reading!

Add Button Shadows to One Page or Section

Now we’re digging a little deeper into the code. If you only want your Squarespace buttons to have shadows on one page, you will need to know the collection ID for that page. There are two ways you can do this.

1. In the video I show you how to find the page collection ID by opening Chrome Developer tools.

2. As an easier route, you can use the Squarespace ID Finder Chrome browser extension. I talk about this tool more in detail in my video on removing link underlines. When you enable the extension, the page collection ID will pop up at the top of your page.

Simply paste the page collection ID at the beginning of your code, and it will restrict your button shadows to that page.

#COLLECTIONID .sqs-block-button-element {  
  CSS CODE FROM GENERATOR HERE
} 

Want the button shadows to only show on one section on your page? No problem! Use the CSS snippet below and insert your page collection ID and code from the shadow generator.

#COLLECTIONID {  
  #page .page-section:nth-of-type(1) { 
    .sqs-block-button-element {  
      CSS CODE FROM GENERATOR HERE
    }   
  } 
}

Next, see the number 1 in parenthesis in the code? That means that only the buttons in the first section of your page will have shadows. You can change this number to whichever section you would like the code to affect. For example, if you want the code to affect the third section on your page, change the number 1 to a 3.  

Add a Shadow to One Button

Finally, what if you want to add a shadow to just ONE button?

Well, for that you will need to find the block ID. Once again, there are two ways you can do this.

1. Find the block ID in the website code (tutorial in video).

2. Use the Squarespace ID Finder Chrome extension.

Paste the code below into your website, then replace the placeholders with the block ID and CSS generator code.

#BLOCKID .sqs-block-button-element {  
  CSS CODE FROM GENERATOR HERE
}   

Just like that, you’ve added a shadow to just one of your buttons! Now you can go sprinkle custom shadows anywhere on your Squarespace website for a unique personal touch.

For more ideas on how to make your buttons pop, learn how you can add a transparent background.

Adding Button Shadows in Squarespace 7.0

If you are still using Squarespace 7.0, use these code snippets instead of the ones provided above.

All Buttons

.sqs-block-button-element {  
  CSS CODE FROM GENERATOR HERE
}   

All Buttons on an Index Page

#COLLECTIONID .sqs-block-button-element {  
  CSS CODE FROM GENERATOR HERE
}   

All Buttons on One Page

#PAGEURL .sqs-block-button-element {  
  CSS CODE FROM GENERATOR HERE
}

One Button

#BLOCKID .sqs-block-button-element {  
  CSS CODE FROM GENERATOR HERE
}   

Here are some other posts you may like:

• How To Create A Vertical Navigation In Squarespace 7.1

• Before/After Image Slider In Squarespace 7.1

• How To Animate Gradient Text On Your Squarespace Website