CSS Snippet:
Button Shine Hover Effect
This CSS snippet adds a subtle “shine” animation that sweeps across a button when a user hovers over it. The effect mimics a light reflection passing over the surface, creating a polished, premium feel.
The animation is created using a pseudo-element and a moving gradient, making it lightweight and easy to apply to any button.
Difficulty:
Easy
Live preview
Shine Hover
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Use case
Use this effect when you want buttons to feel more dynamic and visually engaging. The shine animation naturally draws attention to the element without being distracting.
It works particularly well for call-to-action buttons, hero section buttons, and promotional actions where you want a slightly more premium interaction.
Where to apply it
Apply this class to buttons where you want a smooth shine animation on hover.
Common examples include:
• Primary call-to-action buttons
• Hero section buttons
• Signup or trial buttons
• Promotional action buttons
Notes & Setup
Select your button in Wix Studio.
Add the class: button-shine
Paste the CSS into your site's Custom CSS section.
Adjust the rgba values in the gradient if you want a brighter or softer shine effect.
This works best on buttons with a solid background colour so the shine effect is clearly visible.
This CSS only creates the shine animation; style your button using the native controls in the Wix Studio side panel.
Licensing
This CSS snippet is free to use in personal and commercial Wix Studio projects. You’re welcome to copy, adapt, and use it on client or business websites.
Credit is not required, but if you found it useful, we’d really appreciate a small link back to Wix Doctor, ideally on your site’s footer, about page, credits page or wherever feels appropriate.
Linking back helps more Wix users discover the library and supports the continued creation of free snippets, tutorials, and community resources.
CSS Code
css
.button-shine {
position: relative;
overflow: hidden;
}
.button-shine::before {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.6) 50%,
rgba(255,255,255,0) 100%
);
transform: skewX(-20deg);
transition: left 0.6s ease;
}
.button-shine:hover::before {
left: 125%;
}
