How to Add a Continuous Pulse Effect to Buttons with CSS, Have you ever wanted to add a pulsing effect to a button on your website — but without needing to hover over it?
You know, you’re all the way down here on the page, and the button is still pulsing up there — grabbing attention?

Good news: with a little bit of CSS, you can make that happen — super easily!

I found this awesome trick from a website, and it’s so simple yet powerful if you want to add animated effects to your site.
Let’s jump right into it!

🎯 Back to Basics: The Standard Button

Let’s start simple:

• I created a big button (just to make it easier to see).
• Right now, nothing happens when you look at it — it’s just a regular button.

In Elementor (or whatever builder you’re using), you do have the option to add effects when someone hovers over the button.
For example, if you set a hover animation like “Pulse”, it only triggers when you move your mouse over the button.
Cool — but that’s not what we want.

We want it to pulse all the time, even when no one’s touching it!

🛠 Setting It Up: Make the Button Pulse Continuously

Here’s what you need to do:

1. Assign a Class Name
   • Go to the Advanced tab of your button settings.
   • Under CSS Classes, type: cssCopyEditpulse-button
   • (You can name it whatever you want, but we’ll use pulse-button for now.)
2. Add the Custom CSS
   • If you have Elementor Pro, you can add CSS directly inside Elementor under Custom CSS.
   • If you don’t have Elementor Pro:
     • Add the CSS code into Appearance > Customize > Additional CSS (in WordPress).
     • Or use a plugin like Simple CSS or Code Snippets.

Here’s the CSS code you need:

.elementor-button {
box-shadow: 0 0 0 rgba(255,255,255, 0.9);
animation: pulse 2s infinite;
}
.elementor-button:hover {
animation: none;
}

@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.9);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
box-shadow: 0 0 0 0 rgba(255,255,255, 0.9);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(255,255,255, 0);
box-shadow: 0 0 0 10px rgba(255,255,25544, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
box-shadow: 0 0 0 0 rgba(255,255,255, 0);
}
}

⚡ How This Works

• animation: pulse 2s infinite;
  → This tells the button to keep pulsing forever, taking 2 seconds per pulse.
• @keyframes pulse
  → Defines the animation:
  • It grows slightly at 50% (middle of the animation)
  • Then shrinks back to normal size.

🔥 Customize Your Pulse Speed

Want the button to pulse faster or slower?
Just change the 2s value in the CSS:

Example:

cssCopyEditanimation: pulse 1s infinite;

Boom 💥 — faster pulsing!

🧠 Important Tip

If you don’t use a custom class (like pulse-button) and apply this code to a generic Elementor button, it will affect every button on your site.
(You might not want every single button pulsing like a maniac 😅.)

So always use a specific class name when adding custom CSS for special effects!

🙌 Final Thoughts

Adding a simple pulsing animation to your buttons can make them stand out and boost clicks.
It’s eye-catching without being too flashy — perfect if you want to add a little bit of life to your landing page or website.

💬 Conclusion

• Super easy ✔️
• No Pro plugins needed ✔️
• Works in any theme or builder ✔️

If you liked this trick, feel free to like, share, and follow!
I’m Imran from Web Squadron — helping you make websites that rock!
🎵 Never break, always fight, never quit, do it right… 🎵

See you in the next one! 🚀