YouTubeBlogHome

Add a Colour Cycle Animation to Your Squarespace Buttons

In this guide I'll show you how to add a colour cycle animation to the buttons on your Squarespace website.

First off, the button. Yep, we'll need to add one of those to the page.

This code will only target the button when it's set to small. So in the button options set the button to, erm 'Small'.

From here you can also configure your button text and Clickthrough URL.

Once you are done, hit 'Apply' and the save the changes to the page.

Next head over to Custom CSS (from the main side panel it's Design > Custom CSS), and in the Custom CSS we'll add the following code:

.sqs-block-button-element--small {
-webkit-animation: color-rotate 5s linear infinite alternate;
animation: color-rotate 5s linear infinite alternate;
}

Once that part is in leave a space after the last curly bracket...

...and on a new line add the following CSS:

@-webkit-keyframes color-rotate {
0% {background: #ff0000}
50% {background: #001bea}
100% {background: #17cc00}
}

Your button should be rotating through some pretty crude colours now.


So next, onto the colours that are being cycled. To edit these you can simply replace the hex colour codes:

@-webkit-keyframes color-rotate {
0% {background: #ff0000}
50% {background: #001bea}
100% {background: #17cc00}
}

So let's say, for instance, you'd like your button running through a variation of reds you would replace the hex colours like so:

@-webkit-keyframes color-rotate {
0% {background: #a83535}
50% {background: #c12424}
100% {background: #f20404}
}

Tip: I use ColorZilla plugin for Chrome. You can download it here.

Now this code will affect every single small button on your website. So what do you do if you want to use this effect just on one or two buttons?

No problem, we can target one, two, three, or however many buttons you want.

I use another handy plugin for Chrome called Squarespace Collection/Block Identifier. You can grab that here.

Once you've got that installed click on the plugin, you can find it next to the address bar in Chrome.

This will bring up the ID of every element on your website.

You'll need to click on the block id directly over the button that you want to target:

This will copy the block id to your clipboard.

Head back over to you Custom CSS and paste the block id directly in front of the first part of the CSS and then wrap the first part of the CSS with a left and right curly bracket:

To target more than one button simply copy the next buttons block id and paste it in front of the first one, separated by a comma like so:

If you need help with your Squarespace website feel free to reach out here.