Переключатель

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

<style>
  .toggle {
    --size: 2.5rem;
    position: relative;
    appearance: none;
    width: calc(var(--size) * 2.12);
    height: var(--size);
    background-color: grey;
    border-radius: calc(var(--size) * 0.5);
    display: flex;
    align-items: center;
    padding: calc(var(--size) * 0.12);
    transition: background-color 0.3s ease;
    border: none;
    font-weight: 600;
    font-size: calc(var(--size) / 2.5);
  }
  .toggle:not(:disabled) {
    cursor: pointer;
  }
  .toggle::after {
    content: "";
    display: block;
    width: calc(var(--size) * 0.87);
    height: calc(var(--size) * 0.87);
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
  }
  .toggle:checked {
    background-color: #1cc668;
  }
  .toggle:checked::after {
    transform: translateX(var(--size));
  }
  .toggle::before {
    content: "on";
    position: absolute;
    display: block;
    left: 1em;
  }
  .toggle:not(:checked)::before {
    content: "off";
    left: auto;
    right: 1em;
  }
</style>