Somethinghitme

Needed a pretty quick toggle for a project I was working on, definitely could have copied one of the hundreds of toggles out there that exist, but what's the fun in that?

The main purpose was to allow it to be used as a checkbox with a single element rquiring no extra elements or correct placement of container or child elements.

<input type="checkbox" class="toggle">

All of the magic is of course in the CSS.

.toggle {
  --size: 1.125rem;
  --width: calc(1.125rem * 2);
  display: inline-grid;
  align-items: center;
  width: var(--width);
  height: var(--size);
  cursor: pointer;
}

.toggle::before {
  content: "";
  grid-area: 1 / -1;
  width: var(--width);
  height: var(--size);
  transition: all 250ms ease;
  border-radius: var(--width);
  background-color: #000;
}

.toggle:hover::before {
  box-shadow: 0 0 0 2px #aef;
}

.toggle::after {
  content: "";
  grid-area: 1 / -1;
  width: calc(var(--size) * 0.8);
  height: calc(var(--size) * 0.8);
  transform: translateX(10%);
  transform-origin: center center;
  transition: all 250ms ease;
  border-radius: 100%;
  background: #fff;
}

.toggle:checked::before {
  background-color: #2be;
}

.toggle:checked::after {
   transform: translateX(calc(var(--width) - var(--size) * 0.8 - 10%));
}

.toggle:disabled {
  pointer-events: none;
  filter: grayscale(1);
}

.toggle:disabled::before {
   background: #2be;
}