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 👇

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.

---

📩 Join the inner circle to get exclusive code updates

---

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.

---

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?