How to Create An Animated Gradient Button with CSS

Welcome! In this tutorial, we're going to be taking a look at how to create animated gradient buttons that you can add to your websites and projects. I'll be showing you how to recreate a cool effect where the gradient moves back and forth to create a fun and engaging animation.

I've always loved including gradients in my websites and projects, and buttons are no exception! 

Here's the animated button we'll be creating:

Let's get started!

1. Create HTML Button

Firstly, create the button in HTML and add a class called "gradient_anim_btn" to this element:

<button type="button" class="gradient_anim_btn ">Get Started</button>

2. Add the Gradient Animation CSS

Now it's time to create the CSS for the gradient. In this example, the background of the button is set to a gradient, which consists of three colors in warm tones of pink, orange and amber. I've also included some additional CSS for styling the button's text color, and added some extra padding too.

We'll take a look at how to animate the button's gradient in the next section.

.gradient_anim_btn {
  color: white;
  font-weight: 600;
  font-size: 14px;
  margin: 12px;
  padding: 14px 20px 14px 20px;
  border-radius: 0.7em;
  background: -webkit-linear-gradient(225deg, rgb(251, 175, 21), rgb(251, 21, 242),             
  rgb(21, 198, 251)) 0% 0% / 300% 300%;
  background-size: 200% auto;
  -webkit-animation: gradient_move 3s ease infinite;
  animation: gradient_move 3s ease infinite;
}

3. Add Animation Keyframes

To add the animation, simply create keyframes which move the background position of the gradient, thus creating a cool effect:

@-webkit-keyframes gradient_move {
  0%{background-position: 0% 92%}
  50%{background-position: 100% 9%}
  100%{background-position: 0% 92%}
}

@keyframes gradient_move {
  0%{background-position: 0% 92%}
  50%{background-position: 100% 9%}
  100%{background-position: 0% 92%}
}

Here's an example of what it looks like:

You could use this button for a variety of contexts, including as a CTA button. Or you could only add the animation when a user hovers over the button, for instance.

Conclusion

Thanks very much for reading this guide, I hope that you've found it useful for creating cool gradient effects that you can add to your buttons.

You could also try out different variations also; for instance, you could try out different gradient colors or animation speeds too. If you'd like to create and export these types of components quickly, the Isotope Editor will provide this functionality in the future.

Be sure to sign up to our newsletter if you'd like to keep up-to-date on the latest developments, plus we'll include lots of cool links to frontend tools and tutorials.