To apply a gradient animation effect on a button background in CSS, you can use the transition property and the :hover pseudo-class.

Here is an example of how you can do this:

button {
  background: linear-gradient(to right, #ff0000, #ffff00);
  transition: background 0.5s ease;
}

button:hover {
  background: linear-gradient(to right, #ffff00, #00ff00);
}

In the example above, we are using a linear gradient that goes from red to yellow as the background for the button. When the user hovers over the button, the background transitions to a linear gradient that goes from yellow to green.

The transition the property specifies that the transition should take 0.5 seconds and have an easing effect. You can adjust the duration and easing effect to achieve the desired result.

You can also use multiple color stops in the gradient to create more complex animations. For example:

button {
  background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #0000ff);
  transition: background 1s ease;
}

button:hover {
  background: linear-gradient(to right, #0000ff, #00ffff, #ffff00, #ff0000);
}

In this example, the button has a gradient that goes from red to blue, and when the user hovers over the button, the gradient transitions to a gradient that goes from blue to red.

I hope this helps! Let me know if you have any questions.