Free CSS Toggle Switch: 29 Animated Designs 2026

#html #css #frontend

29 Free CSS Toggle Switch Components 2026

ProofMatcher has 29 free CSS toggle switches — iOS-style, neon, material, and more. Zero JavaScript needed.

iOS-Style Toggle

<label class="ios-toggle">
  <input type="checkbox">
  <span class="track"></span>
</label>

.ios-toggle { position:relative; width:52px; height:28px; display:inline-block; }
.ios-toggle input { display:none; }
.track {
  position: absolute; inset: 0;
  background: #3a3a3a;
  border-radius: 28px;
  cursor: pointer;
  transition: background .25s;
}
.track::before {
  content: '';
  position: absolute;
  height: 22px; width: 22px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.ios-toggle input:checked + .track { background: #e53e3e; }
.ios-toggle input:checked + .track::before { transform: translateX(24px); }

Neon Toggle

.neon-track { background:#1a1a1a; border:1px solid rgba(0,255,204,.3); }
.ios-toggle input:checked + .neon-track { background:#00332b; border-color:#00ffcc; }
.ios-toggle input:checked + .neon-track::before { background:#00ffcc; box-shadow:0 0 10px rgba(0,255,204,.6); }

Slim Material Toggle

.mat-toggle { position:relative; width:36px; height:14px; display:inline-block; }
.mat-track { position:absolute; inset:0; background:rgba(255,255,255,.2); border-radius:7px; cursor:pointer; }
.mat-thumb {
  position:absolute;
  width:20px; height:20px;
  top:-3px; left:-3px;
  background:#888; border-radius:50%;
  transition:transform .2s, background .2s;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}
input:checked ~ .mat-thumb { transform:translateX(22px); background:#e53e3e; }