Shine sweep on button hover

A diagonal light streak sweeps across the button on hover. Premium polish without screaming.

Effects Captured JS-free

Use when — hero CTA on a premium-feeling page. Adds a tactile "this is the button" quality. Don't apply to every button — it loses meaning. One sweeping CTA per page; secondary buttons stay calm.

Live demo

Hover (or tap on phone) the buttons.

The trick

A pseudo-element ::before sits inside the button, sized to half the button's width, with a diagonal light gradient. By default it's translated outside the left edge and skewed. On hover, it animates to the right edge — appearing to sweep across. overflow: hidden on the button hides the streak when it's outside.

CSS

.shine-btn {
  position: relative;
  overflow: hidden;
}
.shine-btn::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 50%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0.4) 50%,
    transparent 100%);
  transform: translateX(-120%) skewX(-18deg);
  transition: transform 800ms cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}
.shine-btn:hover::before {
  transform: translateX(240%) skewX(-18deg);
}

Variants worth considering

Speed — 0.8s is the premium feel. Faster (0.4s) reads as snappy/playful. Slower (1.4s) feels luxurious but can drag.

Color — on dark buttons, rgba(255,255,255,0.4) works. On light buttons, try rgba(0,0,0,0.08) — a darker streak shows on a lighter button.

Angle — skewX(-18deg) is the standard. More aggressive (-30deg) looks "sportier". Vertical (0deg) is rare but cleaner for minimalist sites.

Source: Chevy 55 landing page (user-uploaded HTML, 2026-05-18). Same technique used on Stripe, Apple promo buttons.