How to create a pulsating button

Feb 13

In this tutorial, you'll learn how to create a pulsating button on your Squarespace website. This tutorial is specifically designed for Squarespace 7.1.

Adding a pulsating button to your Squarespace site is a powerful way to capture attention, guide user interactions, and enhance your website's overall design. Whether you're promoting a special offer, encouraging sign-ups, or drawing attention to important content, a pulsating button can make a big difference. Here’s why you should consider using one:

Grabs Attention Instantly: In a sea of static elements on a webpage, a pulsating button naturally stands out. The subtle animation catches the eye without being overly distracting, ensuring visitors notice and engage with your call-to-action (CTA).
Enhances User Experience: A pulsating button creates a sense of interactivity and guides users toward their next step. This visual cue eliminates confusion about where to click and encourages smoother navigation, making your site more intuitive and user-friendly.
Increases Click-Through Rates: By directing attention to important CTAs, pulsating buttons can significantly improve click-through rates. Whether it’s a "Sign Up Now," "Shop the Sale," or "Learn More" button, the animation encourages users to take action.
Promotes Key Content: If you have a limited-time offer, new product launch, or event registration, a pulsating button highlights this content effectively. It signals urgency and importance, prompting users to engage before they miss out.
Customizable to Fit Your Brand: Pulsating buttons can be styled to align perfectly with your brand's design. From choosing the colors and size to adjusting the speed and intensity of the animation, you can ensure the button complements your website's aesthetic while maintaining its functionality.
Mobile-Friendly Design: Squarespace’s responsive platform ensures that pulsating buttons look great across devices. This is crucial as a significant portion of web traffic comes from mobile users. A well-designed button enhances the user experience regardless of the screen size.
Easy to Implement: Adding a pulsating button on Squarespace doesn’t require advanced coding skills. With a few lines of custom CSS or by using third-party plugins, you can quickly create an engaging, animated button for your site.

Complexity: Easy

Step 1

Copy the code below and from the Squarespace dashboard navigate to Pages > Webtools > Custom CSS and paste the code. Note this will apply to all buttons set primary. If you want secondary or tertiary change ‘.sqs-button-element--primary‘ to either ‘.sqs-button-element--secondary‘ or ‘.sqs-button-element--tertiary‘.

/* Pulsating Button */
.sqs-block-button .sqs-button-element--primary {
  box-shadow: 10 10 10 10 rgba(0, 125, 254, 0.72) !important;
  animation: pulse 1.5s infinite !important;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 125, 254, 0.72);
    }
    70% {
        box-shadow: 0 0 10px 20px rgba(0, 125, 254, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 125, 254, 0);
    }
}

Note: You can change the rgba colour to your liking using this site RapidTables.

Learn more

Step 2

Use the CSS below if you are targeting a particular button with the known block ID.

/* Button animation */
[BLOCK ID] a  {
  box-shadow: 10 10 10 10 rgba(229, 172, 0, 0.72) !important;
  animation: pulse 1.5s infinite !important;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(229, 172, 0, 0.72);
    }
    70% {
        box-shadow: 0 0 10px 20px rgba(229, 172, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(229, 172, 0, 0);
    }
}

Conclusion

A pulsating button is more than just an eye-catching feature—it’s a strategic design element that can boost user engagement, improve navigation, and drive conversions on your Squarespace site. With minimal effort, you can create a compelling visual cue that encourages users to interact with your content and take the desired action. Try adding one to your site and see the difference it makes!

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

Book Your Quick Help Virtual Call