Back to library
INTERACTION_028

Premium Input.

A dark field whose border transitions from 10% to 42% white on focus while the label scales down and moves up, with no colored focus ring.

CATEGORY
Forms
COMPLEXITY
Easy
TECH
CSS
PLATFORM
Both
PERFORMANCE
Light
LIVE PLAYGROUND
CSS / CSS
.field {
  background: #0e0e0e;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  transition: border-color 350ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 350ms;
}
.field:focus-within {
  border-color: rgba(255,255,255,0.42);
  background: #151515;
}
.field label {
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms;
}
.field:focus-within label { transform: translateY(-10px) scale(0.82); }

IF YOU LIKE THIS, STEAL THESE TOO.

INTERACTION_001CSS

Premium Button Lift

Weightless 2px rise with an edge highlight on hover.

Buttons / LightView
INTERACTION_029CSS

Modal Entry

Backdrop blurs while the panel scales up 2%.

App UI / MediumView
INTERACTION_004CSS

Sliding Arrow

Directional arrow that translates on hover.

Buttons / LightView
GLASS / SURFACE

Blur 24px · edge light

INTERACTION_010CSS

Glass Panel

Heavy dark glass with an inner edge highlight.

App UI / MediumView