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>