Button Gradient
Hover to triggerThe gradient slides sideways on hover for a fluid colour shift.
Move the pointer over the box
Triggered by
:hover and never auto-plays on load. Move the pointer in and out to watch it again.
Tune parameters
Interactive animations are driven by pointer state; duration and easing live on
transition / animation — change the numbers in the code below.
Full code
/* Button Gradient */
.anim-btn-gradient {
background-image: linear-gradient(90deg, #2563eb, #7c3aed, #2563eb);
background-size: 200% 100%;
background-position: 0% 0;
transition: background-position .5s ease;
}
.anim-btn-gradient:hover {
background-position: 100% 0;
}