Flat buttons look clean, but a call to action can blend into the layout around it. A shadow gives your button some physical presence, so it's easier to spot and feels like it responds to a touch.
1. Add a button shadow effect to your Squarespace site
A button shadow effect adds visual depth and creates a subtle sense of elevation, so your calls to action read as physical, pressable objects rather than flat labels sitting on the page.
2. What is a button shadow effect in Squarespace
A button shadow effect uses CSS box-shadow and transformation properties to simulate depth. The button appears slightly lifted off the page, and when hovered or clicked, it shifts position to mimic being pressed, in a similar spirit to a button move on hover effect.
3. Steps to create the effect
Step 1: Open the Custom CSS panel
Log into your Squarespace account.
Open your website dashboard.
Click Pages.
Scroll down and select Custom CSS under Custom Code.
Step 2: Add the button shadow CSS
// Shadow buttons - Typza.com //
.sqs-block-button .sqs-block-button-element { box-shadow: 7px 7px rgb(255, 87, 106); transition: 120ms !important; }
.sqs-block-button .sqs-block-button-element:hover { box-shadow: 4px 4px rgb(255, 87, 106); transform: translateY(2px) !important; }
.sqs-block-button .sqs-block-button-element:active { box-shadow: none; transform: translateY(4px) !important; }
Step 3: Save and review across layouts
Test the interaction on desktop hover, during clicks, across different sections, and on mobile devices.
Step 4: Adjust shadow styling to match your brand
Refine the shadow distance, color, and transition timing until the effect matches your brand's overall feel.
4. How it works for visitors
When a button appears elevated, visitors instinctively understand it's clickable. As the button shifts and compresses on hover or click, it creates a tactile feedback loop that builds confidence in the interaction.
5. Why use this effect
For serious brands, hierarchy drives performance. A button shadow effect separates primary actions, increases visual contrast, adds personality to minimal interfaces, and improves conversion-focused layouts, a similar goal to the invert button color hover effect.
Conclusion
A shadow is a small detail, but it helps your main button stand out and feel clickable. Today, add the effect to your primary button style, then check it on your phone and on your contact page. If the shadow looks heavy, lower the blur and opacity until it looks natural.
FAQ
What does a button shadow effect do?
A button shadow effect makes a Squarespace button look lifted off the page, then pressed when someone hovers or clicks. It uses box-shadow for the lift, then shrinks the shadow and shifts the button down slightly with translateY. Flat buttons can blend into the layout around them. A shadow gives your call to action some physical presence, so it's easier to spot and feels like it responds to a touch.
What CSS properties create the "lifted" look?
A box-shadow with a vertical offset and blur, such as 0 4px 6px rgba(0,0,0,0.2), creates the lifted look. Combine it with a slight negative translateY to raise the button a little more. Paste the CSS into Website Tools, then Custom CSS, and it applies to the button class you target.
How do I make the button look pressed on click?
Add an :active state that shrinks the shadow and applies translateY(1px) or translateY(2px). The button then looks like it moves down into the page when clicked. On hover, the shadow reduces in the same way, so the button reacts before the click too. Together, the two states make the button feel like a physical object.
Will this effect slow down my Squarespace site?
Not in any way you're likely to notice. A small shadow and a short transform transition are light work for modern browsers. The effect is a few lines of CSS added in Custom CSS, with no images or extra scripts to load.
Does a shadow effect work on all button styles in Squarespace?
Yes, you can apply it to any button class in Squarespace. It reads best on solid-fill buttons. On outline or ghost-style buttons, the shadow can look disconnected from the thin border. If your site uses several button styles, start with your main call to action, which is the button that most needs to stand out.
