How to Add Simple CSS Hover Effects to Squarespace Buttons
Want to make your Squarespace website more interactive and professional? Adding CSS hover effects to your buttons is one of the easiest ways to polish your design without needing any plugins or third-party tools. In this tutorial, I'll walk you through five different hover effects you can add to your Squarespace buttons using just custom CSS.
Getting Started with Squarespace Custom CSS
First, you'll need to access your Squarespace custom CSS area. Here's how:
Log into your Squarespace backend
Navigate to your pages
Scroll down until you see "Custom CSS" and "Custom Code"
Click on "Custom CSS"
This is where we'll be making all our adjustments.
Understanding Squarespace Button Classes
Before we start adding effects, it's important to understand that Squarespace has three different button variations, each with its own CSS class:
Primary buttons - .sqs-button-element--primary
Secondary buttons - .sqs-button-element--secondary
Tertiary buttons - .sqs-button-element--tertiary
You can find these by going to Site Styles > Buttons, where you'll see the three different styles and can adjust their shape, fill, outline, fonts, and more.
Effect #1: Color Change on Hover
The first and simplest effect is changing the button's background color when someone hovers over it.
Here's the CSS code:
.sqs-button-element--primary:hover {
background-color: #your-color-here;
color: #your-color-here;
}
How it works:
Replace #your-color-here with any color code you want
The color property changes the text color
This effect applies to all primary buttons on your site
You can use tools like Adobe Color to find the perfect color codes for your brand.
Effect #2: Adding Shadow Effects
Adding a shadow behind your button creates depth and makes it feel more interactive.
.sqs-button-element--primary:hover {
background-color: #your-color;
color: black;
box-shadow: 0px 4px 15px rgba(0,0,0,0.3);
}
Customizing shadows:
You can adjust the shadow color, blur, and position
Use the CSS Box Shadow Generator to experiment with different shadow effects and get the exact code you need
The shadow appears instantly when users hover over the button
The box shadow generator lets you adjust all the shadow properties visually and gives you the CSS code to copy and paste directly into your Squarespace site.
Effect #3: Underline Animation
This effect creates an animated line that appears under your button text on hover. It works particularly well with secondary buttons.
Setting up the button:
Navigate to Site Styles > Buttons
Select your secondary button
Change the design from "Fill" to "Fit"
Remove the left and right padding
Remove top and bottom padding if desired
.sqs-button-element--secondary {
position: relative;
color: #000;
transition: color 0.3s ease;
}
.sqs-button-element--secondary::after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 2px;
background: #000;
transition: width 0.3s ease;
}
.sqs-button-element--secondary:hover::after {
width: 100%;
}
Customization options:
Change #000 to your brand color
Adjust height: 2px to make the line thicker/thinner
Modify bottom: -5px to position the line closer/further from text
Change 0.3s to speed up or slow down the animation
Effect #4: Slide Transition Effect
This creates a color that slides across the button from one side to the other.
.sqs-button-element--primary {
position: relative;
overflow: hidden;
transition: color 0.3s ease;
}
.sqs-button-element--primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: #your-button-color;
transition: left 0.3s ease;
z-index: -1;
}
.sqs-button-element--primary:hover::before {
left: 0;
}
.sqs-button-element--primary:hover {
color: #your-text-color;
}
How to customize:
Change #your-slide-color to your desired background color
Adjust #your-text-color for the text color on hover
The effect slides smoothly from right to left
Effect #5: Top and Bottom Slide Effect
This effect creates two colors that slide in from the top and bottom of the button, meeting in the middle to create a complete color change.
.sqs-button-element--secondary {
position: relative;
overflow: hidden;
z-index: 1;
transition: color 0.4s ease;
}
.sqs-button-element--secondary::before,
.sqs-button-element--secondary::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 50%;
background-color: #your-button-color;
z-index: -1;
transition: transform 0.4s ease;
}
.sqs-button-element--secondary::before {
top: 0;
transform: translateY(-100%);
}
.sqs-button-element--secondary::after {
bottom: 0;
transform: translateY(100%);
}
.sqs-button-element--secondary:hover::before {
transform: translateY(0%);
}
.sqs-button-element--secondary:hover::after {
transform: translateY(0%);
}
.sqs-button-element--secondary:hover {
color: #your-text-color;
}
How it works:
Two overlay elements (top and bottom) start hidden outside the button
On hover, the top half slides down and bottom half slides up
They meet in the middle to completely fill the button with color
The text color changes from white to black for better contrast
Customization options:
Change background-color: pink to your brand color
Adjust the text colors (color: white and color: black) as needed
Modify the 0.4s timing to make the animation faster or slower
This creates a more dramatic effect than the simple slide transition
This effect works particularly well for call-to-action buttons where you want to create a strong visual impact.
Applying Effects to Different Button Types
To apply any of these effects to different button types, simply replace the class name:
For primary buttons: .sqs-button-element--primary
For secondary buttons: .sqs-button-element--secondary
For tertiary buttons: .sqs-button-element--tertiary
Important Tips
Always click "Save" after making changes to see them take effect on your live site.
Test on different devices to make sure your hover effects work well on both desktop and mobile.
Keep it simple - too many effects can make your site feel overwhelming.
Match your brand - choose colors that complement your existing design.
Conclusion
Need a complete website solution? If you're looking for a professionally designed Squarespace website that already includes beautiful hover effects and custom styling, check out my Squarespace templates - each one is carefully crafted with modern design elements and interactive features built right in.
Want something completely custom? I also offer custom Squarespace design services where I can create a unique website tailored specifically to your brand, complete with advanced CSS effects, custom animations, and everything you need to stand out online.
