Back
A detailed guide on implementing a polished button with a dynamic shine effect using pure CSS animations.
<button class="shine-btn">Button</button>
.shine-btn {
border: none;
border-radius: 1px;
padding: 5px 20px;
background: #00ffb3;
position: relative;
overflow: hidden;
}
Now for the magic—we'll create the shimmering effect using the ::before pseudo-element.
This element will act as our animated highlight that sweeps across the button. We set it to be 100px wide and the full height of the button with absolute positioning.
The key to the shine effect is a linear gradient rotated 120 degrees, transitioning from transparent to a semi-transparent white and back to transparent, creating a diagonal highlight.
Initially, we position it outside the left edge of the button (left: -100px) so it can slide in.
.shine-btn:before {
content: '';
position: absolute;
width: 100px;
height: 100%;
background-image: linear-gradient(
120deg,
rgba(255,255,255, 0) 30%,
rgba(255,255,255, .8),
rgba(255,255,255, 0) 70%
);
top: 0;
left: -100px;
}
Now we'll define the animation keyframes that control the movement of our shine effect.
At the beginning (0%), the shine is positioned outside the button at -100px. By 20% of the animation duration, it moves completely across the button to the right edge (100%).
We maintain this position for the remaining 80% of the animation cycle, creating a pause before the next shine effect begins. This creates a more natural, periodic shimmer rather than a continuous movement.
@keyframes shine {
0% {left: -100px}
20% {left: 100%}
100% {left: 100%}
}
Finally, we apply the animation to our ::before pseudo-element using the animation property.
We set it to run for 3 seconds, repeat infinitely, and use linear timing to maintain a consistent speed throughout the animation.
.shine-btn:before {
content: '';
position: absolute;
width: 100px;
height: 100%;
background-image: linear-gradient(
120deg,
rgba(255,255,255, 0) 30%,
rgba(255,255,255, .8),
rgba(255,255,255, 0) 70%
);
top: 0;
left: -100px;
animation: shine 3s infinite linear; /* Animation */
}
And there you have it—a beautiful button with an elegant shimmering effect that adds visual interest and a premium feel to your interface elements.
<button class="shine-btn">Button</button>
<style>
.shine-btn {
border: none;
border-radius: 1px;
padding: 5px 20px;
background: #00ffb3;
position: relative;
overflow: hidden;
}
.shine-btn:before {
content: '';
position: absolute;
width: 100px;
height: 100%;
background-image: linear-gradient(
120deg,
rgba(255,255,255, 0) 30%,
rgba(255,255,255, .8),
rgba(255,255,255, 0) 70%
);
top: 0;
left: -100px;
animation: shine 3s infinite linear;
}
@keyframes shine {
0% {left: -100px}
20% {left: 100%}
100% {left: 100%}
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!