Shine on Hover Effect Button Template

Add a premium, glossy finish to your buttons with this elegant shine effect on hover.

This subtle animation sweeps a bright sheen across the button's surface, creating a sophisticated micro-interaction that adds a touch of class to any design.

Get Source Code Preview

About the Shine on Hover Effect

The shine effect is a purely cosmetic animation that enhances the visual appeal of a button. It simulates a light source reflecting off a glossy surface, giving the button a high-quality and polished feel. This kind of detail can make an interface feel more responsive and thoughtfully designed. The entire effect is created with a clever CSS trick and requires no JavaScript.

Features

• Elegant Shine Animation: A bright, angled sheen smoothly sweeps across the button when hovered.
• Purely CSS-Driven: The effect is achieved with a single CSS pseudo-element (::before) and a transform transition, making it extremely lightweight.
• Fully Contained: The button must have overflow: hidden to ensure the shine element is only visible as it passes over the button itself.
• Customizable: You can easily adjust the button's colors and the speed of the shine effect via CSS custom properties.

Code Breakdown

The shine effect is created using the button's ::before pseudo-element. This pseudo-element is styled to be a tall, skewed rectangle with a transparent-to-white-to-transparent gradient. By default, it is positioned off-screen to the left of the button. The button element must have position: relative; so the pseudo-element can be positioned absolutely inside it, and overflow: hidden; to clip the pseudo-element when it's outside the button's boundaries. On hover, a CSS transition animates the pseudo-element's transform property, moving it all the way across the button to the right, which creates the sweeping shine.

Code

Here is the complete code for the shine on hover effect button.