In this video I will show you a quick and easy way to add animated gradient buttons for your Elementor buttons.
This can be done using the free version of elementor!
Timestamps:
- 0:00 Introduction
- 0:11 CSS Animated Gradient Generator
- 1:11 Add CSS Code To Elementor Buttons
CodePen Animated Gradient Generator Link:
https://codepen.io/quadbaup/full/ZEQqzqM
.animated-gradient .elementor-button{
animation: animateBg 10s linear infinite;
background-image: linear-gradient(0deg,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000,#ffff00);
background-size: 100% 700%;
}
@keyframes animateBg {
0% { background-position: 0% 100%; }
100% { background-position: 0% 0%; }
}
.animated-gradient2 .elementor-button{
animation: animateBg2 3s linear infinite;
background-image: linear-gradient(90deg,#0080ff,#388363,#fcf8d6,#0080ff,#388363);
background-size: 400% 100%;
}
@keyframes animateBg2 {
0% { background-position: 100% 0%; }
100% { background-position: 0% 0%; }
}
