Back to library
INTERACTION_002

Shine Sweep Button.

A masked gradient pseudo-element sweeps across the button once per hover, reading as light moving over polished metal.

CATEGORY
Buttons
COMPLEXITY
Easy
TECH
CSS
PLATFORM
Both
PERFORMANCE
Light
LIVE PLAYGROUND
CSS / CSS
.btn-shine { position: relative; overflow: hidden; }

.btn-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%,
              rgba(255, 255, 255, 0.45) 50%, transparent 70%);
}

.btn-shine:hover::after {
  transform: translateX(120%);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

IF YOU LIKE THIS, STEAL THESE TOO.

INTERACTION_001CSS

Premium Button Lift

Weightless 2px rise with an edge highlight on hover.

Buttons / LightView
INTERACTION_004CSS

Sliding Arrow

Directional arrow that translates on hover.

Buttons / LightView
INTERACTION_005CSS

Text Swap

Label slides out while its duplicate slides in.

Buttons / LightView
INTERACTION_082CSS

Liquid Hover Button

A rounded fill rises from the bottom edge and floods the button.

Buttons / LightView