20 CSS Animated Buttons 08 / 20

CSS Shine Sweep Hover Button

A metallic light-streak sweeps diagonally across the button surface on hover, simulating a premium gloss reflection using a CSS pseudo-element gradient and translate animation.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="ab-08">
  <p class="ab-08__label">Hover over the buttons</p>
  <div class="ab-08__row">
    <button class="ab-08__btn ab-08__btn--dark">Pro Features</button>
    <button class="ab-08__btn ab-08__btn--gold">Upgrade Now</button>
    <button class="ab-08__btn ab-08__btn--violet">Get Premium</button>
  </div>
</div>
.ab-08,.ab-08 *,.ab-08 *::before,.ab-08 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-08 ::selection{background:#1e293b;color:#fff}
.ab-08{
  font-family:system-ui,sans-serif;
  background:#f1f5f9;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  padding:2rem;
}
.ab-08__label{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#64748b;
}
.ab-08__row{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
}
.ab-08__btn{
  position:relative;
  overflow:hidden;
  padding:.85rem 2.2rem;
  font-size:.95rem;
  font-weight:700;
  border:none;
  border-radius:10px;
  cursor:pointer;
  outline:none;
  letter-spacing:.04em;
  transition:filter .2s,transform .15s;
}
.ab-08__btn--dark{background:#1e293b;color:#e2e8f0}
.ab-08__btn--gold{background:linear-gradient(135deg,#b45309,#d97706,#fbbf24);color:#fff}
.ab-08__btn--violet{background:linear-gradient(135deg,#4c1d95,#7c3aed,#a78bfa);color:#fff}
.ab-08__btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
.ab-08__btn:active{transform:translateY(0);filter:brightness(.95)}
.ab-08__btn::before{
  content:'';
  position:absolute;
  top:-10%;left:-20%;
  width:60%;height:120%;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-100%) skewX(-15deg);
  pointer-events:none;
}
.ab-08__btn:hover::before{
  animation:ab-08-shine .55s ease-in-out forwards;
}
@keyframes ab-08-shine{
  0%{transform:translateX(-100%) skewX(-15deg)}
  100%{transform:translateX(400%) skewX(-15deg)}
}
@media(prefers-reduced-motion:reduce){
  .ab-08__btn:hover::before{animation:none}
}

How this works

The shine is a ::before pseudo-element carrying a linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%) — a narrow bright band between two transparent regions. It starts positioned off the left edge via transform: translateX(-100%) skewX(-15deg). On hover, a @keyframes ab-08-shine animation translates it to translateX(300%) skewX(-15deg), sweeping it across the button face in one smooth pass. The skewX gives the streak a diagonal cut that reads as natural glancing light.

overflow: hidden on the button clips the streak as it enters and exits, keeping the effect tight. animation-fill-mode: forwards holds the streak off-screen after completion so it doesn't snap back visibly. A second hover on the button re-triggers the animation by adding a CSS class toggle — in the Pure CSS version the animation is retriggered naturally each time the cursor re-enters because :hover resets the state cleanly.

Customize

  • Widen the shine streak by increasing the gradient midpoint range from 30% … 70% to 20% … 80% for a broader flash.
  • Change the tilt angle by adjusting skewX(-15deg) — a value of -30deg gives a steeper, more dramatic diagonal cut.
  • Use a gold or rose tinted shine by replacing rgba(255,255,255,.5) with rgba(255,215,100,.5) for a premium metallic feel.
  • Delay the sweep on page load by adding animation-delay: 1s directly on the button's ::before to catch the user's attention after they've settled.
  • Chain multiple sweeps by setting animation-iteration-count: 3 with an animation-delay between iterations using animation shorthand timing.

Watch out for

  • The :hover restart trick works in pure CSS but is not pixel-perfect — rapid mouse oscillation at the button edge can make the animation restart mid-sweep; add a JS class toggle for fine control.
  • overflow: hidden clips the streak but also any box-shadow on the button — wrap the button in a div that carries the shadow if you need both effects simultaneously.
  • On iOS, :hover is triggered by a tap and stays active until another tap elsewhere — the shine will remain triggered rather than play-and-reset; acceptable behaviour on touch devices.

Browser support

ChromeSafariFirefoxEdge
26+ 9+ 16+ 26+

Uses only CSS animations and gradients; works in all modern browsers without prefixes.

More from 20 CSS Animated Buttons

CSS Animated Download ButtonCSS Hamburger To Close ButtonCSS Add To Cart Button AnimationCSS Social Share Buttons HoverCSS Animated Toggle Switch ButtonCSS Loading Spinner Inside ButtonCSS Next Prev Arrow Button HoverCSS Ghost Button Background RevealCSS Neon Glow ButtonCSS Background Slide Hover ButtonCSS Pure CSS Ripple Effect ButtonCSS Animated Border Draw Button
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →