Elementor

CSS Code for Pulse Effect on Elementor Button

Written by :

Posted on :

Tags :

button, css, effects

Share :

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. Required fields are marked *

Thanks for stopping by! Here's something totally awesome before you depart.
READY FOR A TOTALLY AWESOME WEBSITE?