How to Add a Pulse Effect to a Button in Squarespace
In this blog tutorial, learn step-by-step how to create a pulsating effect for Squarespace buttons
Let’s dive in..
Watch the video
Check out the YouTube video below 👇
Once we have a button set up, we need to locate the custom CSS option in the Squarespace menu. Once inside the custom CSS section, paste the code below.
@keyframes pulse-glow {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7); /* Shadow */
}
50% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(52, 152, 219, 0); /* Shadow */
}
}
#siteWrapper .sqs-block-button a.sqs-button-element--primary {
background-color: #3498db !important; /* Blue color */
color: white !important; /* Text on botton color */
border-radius: 5px; /* Optional: Adjust for rounded corners */
transition: transform 2s ease-in-out;
animation: pulse-glow 2s infinite;
}
Continues under the image.
When the custom code is added, you will immediately see the button appear. Keep in mind that for this to work, it needs to be a "Primary button." However, if you prefer it to be a secondary or tertiary button, simply replace --primary with your desired style.
The provided code also allows you to customize colors and elements of the animation. Check the video for a full overview.
Your designer
I'm Victor Rolf, an expert Squarespace designer .If you'd like to discuss a potential project, you can email me at victor@rolfmade.com or get in touch here. Alternatively, book a free 15-minute consultation call here.
