Button Shine
Hover to triggerA highlight sweeps diagonally across on hover — common on commerce pages.
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 Shine */
.anim-btn-shine {
position: relative;
overflow: hidden;
}
.anim-btn-shine::after {
content: '';
position: absolute;
top: -50%;
left: 0;
width: 60%;
height: 200%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
transform: translateX(-160%) rotate(18deg);
transition: transform .65s ease;
pointer-events: none;
}
.anim-btn-shine:hover::after {
transform: translateX(260%) rotate(18deg);
}