How To Add Pulse Effect To Buttons on Squarespace
I’m always looking for ways to improve bycrawford.com and recently I’ve added a new effect to one of my buttons.
I decided to add a pulsing effect to my book a call button to make it stand out more and catch the eye of users.
Keep reading to find out how to add it to your website too!
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
Head to Website > Pages > Website Tools > Custom CSS and add the following code to your custom CSS box:
.sqs-button-element--primary{
animation: pulsing 2s infinite;
}
@keyframes pulsing {
0% {
transform: scale(0.99);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.99);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
So let’s break down that code.
First off we’re targeting a tertiary button (you can change this to primary or secondary depending on which button you want to add the pulse effect to).
This code is telling Squarespace to add the pulsing effect, going from 0% to 100% in 2 seconds, looping infinitely.
You can change the px of the box shadow, depending on how big you want it as well as the color and opacity of the box shadow that appears when the button pulses.
Once you’ve played around with the code and you’re happy with how everything looks, hit save and you’ll have added a pulse effect to buttons on 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.
