CSS Code for Pulse Effect on Elementor Button

Written by :

Posted on :

Tags :

Share :

Facebook
Twitter
LinkedIn
Reddit
Pinterest

What This CSS Code Does:

Adds a shadow pulse effect to your Elementor buttons.

How To Implement:

If you want this to be a global change, add the snippet by going to Customize > Additional CSS. If you want this to only effect specific buttons, first give the button a class by going to the Advanced tab within the Elementor button element and give it a CSS ID, then add that class in the snippet.

The Code:

				
					.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);
}
}
				
			

Leave a Reply

Your email address will not be published.

Schedule A Call
Play Video
Thanks for stopping by! Here's something totally awesome to brighten up your day!
Schedule A Call
READY FOR A TOTALLY AWESOME WEBSITE?