Switch Components

Sleek, transparent toggle slider utilizing backdrop blur filters and fine borders matching Apple design semantics.

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

Deep recessed track container displaying convex / concave styling. Toggling triggers glowing dynamic gradients.

<label class="neumorphic-switch">
  <input type="checkbox" />
  <span class="neu-slider"></span>
</label>

Sharp terminal borders emitting cyan glowing filters on checked states. Fits modern gaming landing profiles.

<label class="cyberpunk-switch">
  <input type="checkbox" checked />
  <span class="cyber-slider"></span>
</label>

Features organic elastic stretching. Hold clicking stretches the toggle knob before it hops across tracks.

<label class="elastic-switch">
  <input type="checkbox" />
  <span class="elastic-slider"></span>
</label>

A highly tactile 3D square switch that presses deep into the dashboard grid on checked toggles.

<label class="push-3d-switch">
  <input type="checkbox" checked />
  <span class="push-btn"><i class="fa-solid fa-power-off"></i></span>
</label>

Slide indicator that emits an active orange glow shadow, ideal for highlighting settings.

<label class="glow-slide-switch">
  <input type="checkbox" />
  <span class="glow-slider"></span>
</label>

Perfect theme toggle showing a sun icon on unchecked fields and rotating a moon icon on active fields.

<label class="emoji-toggle-switch">
  <input type="checkbox" checked />
  <span class="emoji-slider"></span>
</label>

Simulates a fluid bubble sliding across borders, glowing green and stretching smoothly into place.

<label class="liquid-switch">
  <input type="checkbox" />
  <span class="liquid-slider"></span>
</label>

Sleek status selector where the sliding switch itself displays text toggling between ON / OFF.

<label class="text-indicator-switch">
  <input type="checkbox" checked />
  <span class="text-slider"></span>
</label>

Neo-brutalist arcade pixel console layout with solid thick borders and dynamic neon red/green indicators.

<label class="retro-arcade-switch">
  <input type="checkbox" />
  <span class="retro-slider"></span>
</label>

Extremely minimal and clean dot slider. Perfect for clean, unopinionated user interfaces.

<label class="minimal-dot-switch">
  <input type="checkbox" checked />
  <span class="minimal-dot-slider"></span>
</label>

Sci-fi themed hexagonal clipped toggle switch. Emits a neon red glow on activation.

<label class="cyber-hex-switch">
  <input type="checkbox" />
  <span class="cyber-hex-slider"></span>
</label>

Modern frosted glass effect with a smooth gradient thumb and backdrop blur interactions.

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

Bold neo-brutalist toggle with sharp borders and solid shadow offsets.

<label class="brutalist-block-switch">
  <input type="checkbox" />
  <span class="brutalist-slider"></span>
</label>

Thumb spans beyond the track boundaries creating a magnetic snapping effect.

<label class="magnetic-track-switch">
  <input type="checkbox" checked />
  <span class="magnetic-slider"></span>
</label>