<button class="reset anim-bg-gradient">Animated Button</button>
/* -------------------------------- 

šŸ’” How to animate the background gradient of a button
šŸ”— https://codyhouse.co/nuggets/animated-button-gradients

-------------------------------- */

.anim-bg-gradient {
  padding: 0.6em 1.2em;
  border-radius: 0.375em;
  cursor: pointer;
  color: white;
  background: linear-gradient(120deg, darkmagenta, crimson, orange);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position .5s;
}

.anim-bg-gradient:hover {
  background-position: 0 0;
}

/* demo stuff */
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

External CSS

  1. https://codepen.io/codyhouse/pen/PoaqJWp.css

External JavaScript

This Pen doesn't use any external JavaScript resources.