How to animate the background gradient of a button.

Animating the background gradient of a button (or any other element) is not an easy task. The linear-gradient function is applied to the background-image property. If, for example, on hover, you change the linear-gradient values, you can't apply a transition and animate the background (the change will be instantaneuos even if you apply a transition).

What you can do is creating a background gradient that is bigger than the button itself (using the background-size property), then animate the background-position property to translate the background.

.anim-bg-gradient {
  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;
}

Live demo: