INTERACTION_001

Premium Button Lift.

The baseline hover state for every serious CTA. The surface lifts a couple of pixels, the shadow deepens slightly and a thin top-edge highlight simulates light catching the button.

CATEGORY: Buttons
COMPLEXITY: Easy
TECH: CSS
PLATFORM: Both
PERFORMANCE: Light

LIVE PLAYGROUND

CSS / CSS

.btn-lift {
  border-radius: 999px;
  padding: 0.875rem 1.75rem;
  background: #f5f5f3;
  color: #050505;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.9);
}

.btn-lift:active { transform: translateY(-1px); }

Tailwind / HTML

<button class="rounded-full bg-white px-7 py-3.5 text-black transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] hover:-translate-y-[3px] hover:shadow-[0_14px_30px_-14px_rgba(0,0,0,0.9)] active:-translate-y-px">
  Explore effects
</button>

IF YOU LIKE THIS, STEAL THESE TOO.

All effects

INTERACTION_002CSS

Shine Sweep Button

A diagonal chrome glint travels across the surface 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