Back to CSS Checkboxes Aurora Toggle Pure CSS
Share
.cb-aurora {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-aurora__input { display: none; }
.cb-aurora__track {
  width: 56px; height: 28px; border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  position: relative;
  transition: background .4s, border-color .4s;
}
.cb-aurora__thumb {
  position: absolute; top: 4px; left: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.cb-aurora__input:checked + .cb-aurora__track {
  background: linear-gradient(90deg,
    #7c6cff, #ff6c8a, #3de8f5, #1ed98a, #7c6cff);
  background-size: 300% 100%;
  border-color: transparent;
  animation: aurora-shift 3s linear infinite;
}
.cb-aurora__input:checked
  + .cb-aurora__track .cb-aurora__thumb {
  transform: translateX(28px);
}
@keyframes aurora-shift {
  0%   { background-position: 0%   50%; }
  100% { background-position: 100% 50%; }
}
<label class="cb-aurora">
  <input class="cb-aurora__input" type="checkbox" checked />
  <span class="cb-aurora__track">
    <span class="cb-aurora__thumb"></span>
  </span>
  <span>Aurora toggle</span>
</label>
Live preview Edit any tab — preview updates live Ready