Switch Bounce

<label class="nuda-switch-bounce" aria-label="Toggle">
  <input type="checkbox" />
  <span class="nuda-switch-bounce__track">
    <span class="nuda-switch-bounce__thumb"></span>
  </span>
</label>

/* Switch Bounce — toggle whose thumb overshoots with a springy easing. */
.nuda-switch-bounce { display: inline-flex; cursor: pointer; }

.nuda-switch-bounce input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

.nuda-switch-bounce__track {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  border-radius: 99px;
  background: #2a2a32;
  transition: background 0.3s ease;
}

.nuda-switch-bounce__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fafafa;
  transform: translateX(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nuda-switch-bounce input:checked + .nuda-switch-bounce__track { background: #e4ff54; }
.nuda-switch-bounce input:checked + .nuda-switch-bounce__track .nuda-switch-bounce__thumb {
  transform: translateX(24px);
  background: #09090b;
}

.nuda-switch-bounce input:focus-visible + .nuda-switch-bounce__track {
  outline: 2px solid #e4ff54;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-switch-bounce__track,
  .nuda-switch-bounce__thumb { transition: none; }
}