How to add a shadow to buttons in Squarespace 7.1

Buttons are essential call-to-action elements on your website. Whether it's a “Buy Now,” “Learn More,” or “Submit” button, they should stand out and guide your visitors effectively. One simple way to make buttons more engaging and modern is by adding a subtle shadow.

In this tutorial, you'll learn how to add a shadow to your Squarespace 7.1 buttons using CSS—with the help of CSSGenerator.org, a free tool that lets you visually create your shadow effect before copying the code.

Table of Contents

• Why Add a Shadow to Buttons

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Add a Shadow to Buttons?

• Increases Clickability: Shadows add depth, making buttons look more like tangible elements that invite interaction.

• Improves Visual Hierarchy: Helps distinguish buttons from other elements, drawing attention to important actions.

• Modernises Your Design: Clean shadows add sophistication and dimension to your interface.

Complexity: Easy

Step-by-Step Instructions

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.

Step 1: Create Your Shadow CSS

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

Step 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 in 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
}

To apply to all button types, primary, secondary and tertiary

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

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

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

Note: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and add appropriate code.

---

Key Takeaways

• Use CSSGenerator.org to quickly visualise and copy clean box-shadow CSS.

• Add it via Pages > Custom Code > Custom CSS in Squarespace 7.1.

• Target buttons using .sqs-block-button-element--primary or other variants (--secondary, --tertiary, etc.).

• Enhance with hover effects for a polished UX.

FAQs

Can I apply shadows to only one specific button?
Yes! Use a block ID to target it individually: #block-yui_3_17_2_1_123456 .sqs-block-button-element { box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); }

Will this work on mobile?
Absolutely. Button shadows are responsive and supported across devices and browsers.

Can I animate the shadow for better interaction?
Yes. Add transition: box-shadow 0.3s ease; to smoothly animate on hover.

---

---

Conclusion

Adding button shadows is one of the easiest ways to elevate your Squarespace website’s visual style. With free tools like CSSGenerator.org, you don’t need to guess—just drag, preview, and paste.