← All effects
Shine Sweep
hover or click the button — it also fires on its own
-- fps
prefers-reduced-motion detected — no sweep, plain button
X-ray · layers
the light that crosses the button
the beam leans like real light
the button rises to meet the hover
Parameters
Sweep duration900 ms
Beam width24%
Slant angle20°
Beam opacity0.85
your version · updates as you tinker
How this effect works
The beam is one extra element inside the button: a narrow bright stripe, absolutely positioned, with the button set to overflow: hidden so the stripe only exists while it's crossing. On hover we slide its left from beyond one edge to beyond the other — a single number moving from -40% to 140%.
The slant layer is what makes it read as light instead of a windshield wiper: a simple skewX tilts the stripe the way a reflection would lean on glass. Turn it off and watch the same sweep suddenly look mechanical. The lift layer is the button's own answer to the hover — a 2px rise with a soft glow — so the light and the button feel like one gesture, not two effects glued together.
Production notes: respects prefers-reduced-motion (no sweep, button stays put) · the sweep animates one absolutely positioned element inside one button — negligible cost, works on dozens of buttons at once · fires on hover and on click, so touch screens get it too · the copied snippet is self-contained HTML + CSS + JS.