← All elements
<button class="ss">Upgrade plan</button>About this button
A diagonal beam of light sweeps across the button once on hover.
How it works
A pseudo-element with a transparent-white-transparent gradient is skewed and parked off the left edge. On hover its left value transitions past the right edge, so a beam of light crosses the button once. overflow hidden keeps the beam inside the rounded shape.
Ways to customise it
- Change the middle white stop opacity for a brighter beam.
- Make the beam narrower by lowering the 50% width.
- Run it forever with a keyframe animation for a promotional button.
Good to know
The effect only plays on hover, so it never distracts while someone is reading. Moving left and skew is fine here, but prefer transform for large or long-running animations.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.