Glowing/Pulsing Button Effect In Elementor | Neon Button

Опубликовано: 11 Февраль 2023
на канале: Uriel Soto

9,061

175

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:
https://urieljsoto.gumroad.com/l/free...

🔴 Download My Custom Templates:
https://urieljsoto.gumroad.com/

🔵 Join Our Facebook Community!
http://bit.ly/urielsotofbgroup

🟢 My Web Agency:
https://vluxdesigns.com/

PRODUCTS I USE FOR MY WEBSITES:

🔴 Get Elementor Pro - My Favorite Page Builder
http://bit.ly/urielelementorpro

PRIVATE GROUP:

🔵 Join My Patreon & Get Design Downloads
https://bit.ly/uspatreon

CONTACT ME:

My Website: http://urielsoto.com/
Facebook: / urielsotodev
Linkedin: / uriel-soto-976b3117a