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);
}
}
One Response
Great tip, thank you!