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

To apply to all the buttons on a page

To apply to all the buttons on a section

To apply to an individual button

Note, add appropriate code to Design > Custom CSS.