Switch

Preview

Usage

<!-- Off -->
<label class="glass-switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

<!-- On -->
<label class="glass-switch">
  <input type="checkbox" checked />
  <span class="slider"></span>
</label>

<!-- Disabled -->
<label class="glass-switch">
  <input type="checkbox" disabled />
  <span class="slider"></span>
</label>

Structure

Element / Class	Purpose
.glass-switch	Outer <label> container (50×28px)
input[type="checkbox"]	Hidden checkbox (controls state)
.slider	Visual track with the sliding knob (::before)

States

State	Behavior
Off	Recessed glass track, knob on the left
On (checked)	Track turns green (--glass-success), knob slides right (translateX(22px)), subtle green glow
Focus	Accent glow ring around the track
Disabled	opacity: 0.5, cursor: not-allowed

CSS Details

• Knob: 22×22px white circle with 0 3px 8px shadow, cubic-bezier slide transition
• Track: Glass material with thin blur, pill-shaped (border-radius: 34px)
• Checked track border uses rgba(success-rgb, 0.4)