How to add a shadow to buttons in Squarespace 7.1

Adding shadows to buttons can help improve your website. This tutorial shows you how to add a shadow to buttons using only CSS in Squarespace.

Complexity: Easy

A useful tool you can use to identify the #collection-id, #block-id and section[data-section-id="xxxxxxx"] is a Chrome Extension called Squarespace ID Finder (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which I fully recommend.

1: Create Your Shadow CSS

Go to cssgenerator.org create your shadow, and copy the CSS code provided.

2: Add the shadow generated code to your website using the appropriate CSS option below.

To apply to all the buttons

.sqs-block-button-element {
INSERT CSS GENERATED CODE HERE
}

To apply to all the buttons on a page

#collection-id .sqs-block-button-element {
INSERT CSS GENERATED CODE HERE
}

To apply to all the buttons on a section

#collection-id {
#page .page-section:nth-of-type(1) {
.sqs-block-button-element {
INSERT CSS GENERATED CODE HERE
}
}
}

To apply to an individual button

#block-id .sqs-block-button-element {
INSERT CSS GENERATED CODE HERE
}

Note, add appropriate code to Design > Custom CSS.