A static button gives visitors no cue that it's clickable. This small effect fixes that, and it's the kind of detail that makes a site feel designed. It only takes a few lines of CSS.
1. Add a button scale up hover effect to your Squarespace site
We use this effect on almost every Squarespace build where a client wants their calls to action to feel alive without heavy animation. A button scale up hover effect enlarges a button slightly when a visitor's cursor lands on it, signaling clickability without shouting for attention .
This tutorial covers what the effect is, how to add it with custom CSS, how it reads for visitors, why it's worth using, and what to check once it's live.
2. What is a button scale up hover effect in Squarespace?
A button scale up hover effect is a CSS animation applied to buttons on your Squarespace site. When a visitor moves their cursor over a button, it enlarges slightly, typically between 5% and 15% of its original size.
We see this used most on call-to-action buttons, navigation buttons, and form submission buttons, anywhere a business wants to nudge attention toward the next step.
3. How to create a button scale up hover effect on Squarespace
Step 1: Open the CSS editor
Navigate to Pages > Custom Code > Custom CSS.
Step 2: Add the scale up hover effect CSS
Copy and paste the following into the Custom CSS editor:
// Button scale up hover effect - Typza.com //
.sqs-button-element--primary { transition: 0.3s; }
.sqs-button-element--primary:hover { transform: scale(1.1); }
Step 3: Adjust the scaling if needed
Change the scale() value: 1.05 for something subtle, 1.15 for a more pronounced effect.
Step 4: Save and preview
Click Save, then test the effect on desktop and mobile.
4. How a button scale up hover effect works for visitors
The enlargement gives visitors immediate feedback that an element is interactive. Small, well-timed micro-interactions like this one make a site feel more responsive and more deliberately built.
5. Why use a button scale up hover effect
We recommend it because it strengthens brand polish, nudges conversions upward, and improves the overall feel of a page without adding visual clutter, in the same spirit as a button shadow effect on Squarespace.
Conclusion
It's a small detail, but it tells visitors a button can be clicked before they click it. Today, paste the snippet into Website Tools > Custom CSS, set the scale to 1.05 and hover over your main button. If it feels too subtle, try 1.1. Phones have no hover, so make sure your buttons still look clickable there.
FAQ
What does a button scale up hover effect actually do?
It enlarges a button slightly when a visitor's cursor lands on it, typically by 5 to 15 percent of its original size. It uses a CSS transform on hover and a short transition, so the growth feels smooth rather than abrupt. The enlargement gives visitors immediate feedback that the button is clickable, which makes calls to action feel alive without heavy animation.
Will a scale up hover effect break my Squarespace layout?
It shouldn't, as long as the scale stays modest and you use transform rather than changing the button's width or height. Our snippet scales the primary button to 1.1 with a 0.3-second transition. After saving, test the effect on desktop and mobile, and check that the enlarged button doesn't overlap or crowd the elements around it on any screen size.
Do I need Squarespace Business plan or higher to add this?
Not necessarily. You add the CSS in Website Tools > Custom CSS. Which plans allow custom code can change, so check Squarespace's current plan page rather than relying on an older guide. The simple test is practical: if the Custom CSS panel is there and the effect works once you save and preview the site, your plan supports it.
How big should the scale increase be for a professional look?
Start at 1.05, which gives a subtle effect, and hover over your main button. If it feels too subtle, try 1.1, which is the value our snippet uses. Use 1.15 only when you want a more pronounced effect. Whatever you choose, check it beside your other buttons so the motion feels consistent across the site and stays restrained.
Can I combine a scale hover effect with a shadow or color change?
Yes. Transform, box-shadow and background color can all sit in the same hover rule for a more layered interaction. Keep each change small so the button still feels refined rather than busy, in the same spirit as a button shadow effect. Test the combined rule on desktop and mobile after saving, since phones won't show hover the same way.
