Elementor Animated Gradient Buttons

Home Elementor Elementor Animated Gradient Buttons

November 11, 2021

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%; }
}
				
			

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

More Free Resources