Add Custom Animations to Buttons on Squarespace
When it comes to adding hover effects to buttons, Squarespace is pretty limited.
That’s why when I’m building client websites, I use some simple code hacks to create custom hover animations.
Let’s take a look at what they are…
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
There are three different hover animations I like to add to buttons, the scale up/down, the moving to the side and the color inversion.
Firstly hit Shift + Command + C and find the ID for the button you want to add your custom animation to.
Head to Website > Pages > Website Tools > Custom CSS and paste your block ID into the custom CSS block.
You then need to add the following code depending on which animation you want to add.
Scale up
.sqs-button-element--primary {
transition: 0.3s;
&:hover {
transform: scale(1.1);
}
Scale down
.sqs-button-element--primary {
transition: 0.3s;
&:hover {
transform: scale(0.9);
}
Move to the side:
.sqs-button-element--primary {
transition: 0.3s;
&:hover {
margin-left: 10px;
}
Invert colors
.sqs-button-element--primary {
transition: 0.3s;
&:hover {
filter: invert(100);
}
Once you’re happy, hit save and you’ll have added a hover animation to your button Squarespace.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
