In this video I'll be showing you how you can create your own Pulsing button in Elementor, using some custom code.
I'll walk you through all the steps and will explain to you each step and why we are doing this step.
I'll also show you how to make the button clickable if you encounter the z-index issue when applying the custom CSS.
The code that you'll need for this tutorial is the following:
.pulse-button {
position: relative; /* Required for child element positioning */
border-radius: 6px;
}
.pulse-button::before { /* Target the first pseudo-element (shadow) */
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent; /* Button background shows through */
border-radius: inherit;
box-shadow: 0 0 0 10px rgba(248, 241, 233, 0.2); /* Initial shadow */
animation: pulse-fade 2s infinite; /* Animation for pulsing */
-moz-animation: pulse-fade 2s infinite;
-webkit-animation: pulse-fade 2s infinite;
}
@keyframes pulse-fade {
0% {
box-shadow: 0 0 0 0 rgba(248, 241, 233, 1);
}
70% {
box-shadow: 0 0 0 10px rgba(248, 241, 233, 0);
}
100% {
box-shadow: 0 0 0 50px rgba(248, 241, 233, 0);
}
}
MDN link to the Box Shadow attribute - developer.mozi...
If you would like to see more videos on Elementor and CSS
Please comment them down below!
I'll do my very best to make them as soon as
I can!
Plugins I Recommend:
Elementor Pro - bit.ly/3JITXMZ
CrocoBlock Elements - bit.ly/3CXX6Vy
See you in the next video! 🙂✌
Some of the links mentioned above are affiliate links, meaning that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I could not make all these videos without your support.
14 окт 2024
