Squarespace 7.1 — Colour Animation [pulsing] on a Button
In this post, I will show you how I made a Squarespace button, pulse with a chosen colour range, to draw more attention to the button and client service of Live Auctions on the client website. Read on for the simple CSS code I came up with to achieve this simple yet elegant enhancement.
Squarespace 7.1 — Colour Animation [pulsing] on a Button
I recently built this new site for a past client (one of Australias leading Real Estate Auctioneers) and then he advised he wanted to add Live Home Auctions to the site. We selected the software to do the live auctions and I simply added it with a code block. Then the challenge was how to inform the website visitors in a simple yet elegant way. We decided on a simple button that pulsed from the website default Dark Blue to Green and back to Dark Blue.
Add some CSS to Target the Individual Button
First we go to Design, then Custom CSS in the settings where we add some CSS to control which specific button we want to pulse with colour.
Please make sure you replace the “block-yui_XXXXXXXXXXXXX” shown below, for your actual Button Block ID.
// START Auction Button //
#block-yui_XXXXXXXXXXXXX
Add some CSS to Pulse the Button
Now we add some CSS to cause the colour of the button to pulse (or rotate between a selected colour range). To achieve this, simply add the following code and adjust the “1s” which stands for 1 Second, to speed up or slow down the pulse effect.
.sqs-block-button-element {
-webkit-animation: color-rotate 1s linear infinite alternate;
animation: color-rotate 1s linear infinite alternate;
Add some CSS to Provide Your Colour Range
Now we add some CSS to nominate our selected colour range. For my client we chose to start the range with our default button colour of Dark Blue, and then pulse to Green, then back to Dark Blue. To achieve this, simply add the following code, and adjust to your requirements.
@-webkit-keyframes color-rotate {
0% {background: #273f62}
100% {background: #008000}
So your full CSS code should look like this (though with your actual Button Block ID replacing the “block-yui_XXXXXXXXXXXXX” as we covered above).
// START Auction Button //
#block-yui_XXXXXXXXXXXXX
{
.sqs-block-button-element {
-webkit-animation: color-rotate 1s linear infinite alternate;
animation: color-rotate 1s linear infinite alternate;
}
}
@-webkit-keyframes color-rotate {
0% {background: #273f62}
100% {background: #008000}
}
// END Auction Button //
The Final Result — Colour Animation [pulsing] on a Button
You can view the LIVE website here to see the pulsing button: Holmes Auctions
Looking for a New Website?
Great web design grabs your attention and gives you what you need without effort. THREE CATS small business web design packages with SEO, are strategically designed to drive more traffic to your website, converting visitors to customers.
Professional, Strategic, Australian Web Design!
