In this video, I'll show you how to add an infinite glowing/pulsing effect to Elementor buttons using CSS. This effect is easy to do and will make your buttons stand out.
CSS For Elementor Pro:
@-webkit-keyframes pulseBtn {
0% {-webkit-box-shadow: 0px 0px 0px 0px rgba(81, 73, 255, 1);}
100% {-webkit-box-shadow: 0px 0px 12px 0px rgba(81, 73, 255, 1);}
}
@-moz-keyframes pulseBtn {
0% {-moz-box-shadow: 0px 0px 0px 0px rgba(81, 73, 255, 1);}
100% {-moz-box-shadow: 0px 0px 12px 0px rgba(81, 73, 255, 1);}
}
@keyframes pulseBtn {
0% {box-shadow: 0px 0px 0px 0px rgba(81, 73, 255, 1);}
100% {box-shadow: 0px 0px 20px 5px rgba(81, 73, 255, 1)
;}
}
selector .elementor-button{
-webkit-animation-name: pulseBtn;
-moz-animation-name: pulseBtn;
animation-name: pulseBtn;
-webkit-animation-duration: 0.9s;
-moz-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
CSS For Elementor Free
@-webkit-keyframes pulseBtn {
0% {-webkit-box-shadow: 0px 0px 0px 0px rgba(81, 73, 255, 1);}
100% {-webkit-box-shadow: 0px 0px 12px 0px rgba(81, 73, 255, 1);}
}
@-moz-keyframes pulseBtn {
0% {-moz-box-shadow: 0px 0px 0px 0px rgba(81, 73, 255, 1);}
100% {-moz-box-shadow: 0px 0px 12px 0px rgba(81, 73, 255, 1);}
}
@keyframes pulseBtn {
0% {box-shadow: 0px 0px 0px 0px rgba(81, 73, 255, 1);}
100% {box-shadow: 0px 0px 20px 5px rgba(81, 73, 255, 1)
;}
}
.glow-btn .elementor-button{
-webkit-animation-name: pulseBtn;
-moz-animation-name: pulseBtn;
animation-name: pulseBtn;
-webkit-animation-duration: 0.9s;
-moz-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}:
Download the website shown in the video:
urieljsoto.gum...
🔴 Download My Custom Templates:
urieljsoto.gum...
🔵 Join Our Facebook Community!
bit.ly/urielsot...
🟢 My Web Agency:
vluxdesigns.com/
PRODUCTS I USE FOR MY WEBSITES:
🔴 Get Elementor Pro - My Favorite Page Builder
bit.ly/urielele...
PRIVATE GROUP:
🔵 Join My Patreon & Get Design Downloads
bit.ly/uspatreon
CONTACT ME:
My Website: urielsoto.com/​
Facebook: / urielsotodev
Linkedin: / uriel-soto-976b3117a