Creating custom button styles with custom CSS
What makes a button a button
At its core, a button is made up of three main parts: a background, a border, and text. That's it. Once you understand this, you can turn almost anything into a button—even plain text links.
Want to style those "Read More" links in your blog summary blocks to look like actual buttons? Just add a background color, some padding, and a border. Suddenly, what was a simple text link becomes a clickable button that matches your site's design.
The beauty of understanding button structure is that you're not limited to Squarespace's button blocks. You can create button-style elements anywhere you need them.
Why buttons need to be !important
Here's something you'll notice pretty quickly when customizing buttons: Squarespace is picky about button styles. The platform has its own built-in button CSS that's pretty stubborn about staying in place.
To get your custom styles to actually show up, you'll need to add !important after most of your values. This tells the browser "ignore Squarespace's default styles and use mine instead."
So instead of writing background-color: black; you'd write background-color: black !important;
It's annoying, but it's necessary. Without it, your custom code will likely get overridden by Squarespace's defaults, and your button won't change at all.
Padding vs. margin: size vs. position
Two properties you'll use constantly when styling buttons are padding and margin, and they do very different things.
Padding controls the space inside the button—between the text and the button's edges. More padding makes the button bigger and gives the text more breathing room. Less padding makes the button more compact.
Margin controls the space outside the button—the distance between the button and other elements around it. Margin moves the button's position on the page without changing the button's size.
Think of padding as making the button itself larger or smaller, and margin as pushing the button away from or closer to its neighbors.
Customizing the correct button type
Here's where things get tricky: Squarespace has over 10 different types of buttons across the platform. There are three types of button content blocks, header buttons, mobile menu CTA buttons, "Add to Cart" buttons on product pages, newsletter form submit buttons, and more.
Each button type has its own unique selector—the code that targets that specific button. If you use the wrong selector, your CSS won't work because you're essentially talking to the wrong button.
This is where a tool like Custom Codey becomes incredibly useful. Instead of digging through your site's HTML trying to figure out which button is which, Custom Codey can identify the exact selector you need for the button you want to customize. It saves hours of trial and error.
Creating custom hover effects
Hover effects—what happens when someone moves their mouse over a button—are where you can really make your buttons stand out. You can change background colors, adjust border thickness, shift the button size, round the corners, or combine multiple effects.
But there's one important catch: if you have Squarespace's built-in animation setting turned on (it's called "Flex" in the site styles menu), it will override your custom hover effects. You'll write beautiful code, preview your site, and... nothing happens.
The fix is simple: turn off the Flex animation in your site styles. Once that's disabled, your custom hover effects will work perfectly.
From there, you can get creative. Make buttons grow slightly on hover. Change the background from solid to transparent. Shift the border radius from square to rounded. Swap text colors. The possibilities are endless, and Custom Codey has examples and generators to help you build exactly the effect you're imagining.
Pro tips for buttons
Always use !important → Squarespace's button styles are stubborn. Save yourself frustration by adding !important to every property value from the start.
Update opacity on a hover → if you have disabled the Flex animation (which I strongly recommend!) you’ll notice that the default hover effect in Squarespace is to lighten the button by changing the opacity. In all of my button hover effect codes, I will add the line opacity:1!important to make sure I override the default setting so the button doesn’t have any transparency.
Start with one button type → Don't try to style every button on your site at once. Pick one type (like your main CTA buttons), get that working perfectly, then move on to others.
Keep hover transitions smooth → Add a transition property (like
transition: all 0.3s ease;) so your hover effects don't feel jarring or instant. Smooth changes look more professional.Match your brand → Your buttons should feel cohesive with the rest of your site. Use your brand colors for backgrounds and borders, and make sure hover states create enough contrast to be noticeable.
Don't forget mobile → Hover effects don't exist on mobile (there's no mouse to hover with), so make sure your default button state looks good on its own. Mobile users will never see the hover version.
Use Custom Codey for selectors → Seriously, don't waste time guessing at button selectors. Let the tool find them for you so you can focus on the creative part.