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 👇

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);
}

---

📩 Join the inner circle to get exclusive code updates

---

Once you’re happy, hit save and you’ll have added a hover animation to your button Squarespace.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?