Создание переключающейся кнопки в HTML: CSS и jQuery

<label class="toggle-switch">
  <input type="checkbox" onchange="toggleIt()">
  <span class="slider"></span>
</label>

.toggle-switch { position: relative; width: 60px; height: 34px; }
.toggle-switch input { display: none; }
.slider {
  position: absolute; width: 100%; height: 100%;
  background-color: #ccc; border-radius: 34px;
  transition: background-color 0.2s;
}
.slider::before {
  content: ""; position: absolute; width: 26px; height: 26px;
  left: 4px; bottom: 4px; background-color: white; border-radius: 50%;
  transition: transform 0.2s;
}
input:checked + .slider { background-color: #2196F3; }
input:checked + .slider::before { transform: translateX(26px); }

function toggleIt() {
  // Здесь мы меняем состояние переключателя...
}

$('input[type="checkbox"]').click(function(){
  if($(this).is(":checked")){
    $(this).addClass("checked");
  } else {
    $(this).removeClass("checked");
  }
});

input:not(:checked) + .slider {
  box-shadow: inset 0px 0px 5px grey;
}
input:checked + .slider {
  box-shadow: 0px 2px 5px grey;
}

<label class="toggle-switch" aria-label="Переключатель для Великого">
  <!-- Здесь находятся элементы checkbox и slider -->
</label>

.slider {
  /* ...предыдущие стили... */
  background-color: #e0e0e0;
  box-shadow: inset 6px 6px 12px #babecc,
              inset -6px -6px 12px #ffffff;
}

$("input[type='checkbox']").change(function(){
  if($(this).is(":checked")) {
    // Добавить анимацию для состояния "включено"
  } else {
    // Добавить анимацию для состояния "выключено"
  }
});

До переключения: 💡🔘---OFF
После переключения: 💡🔘---ON

<button onclick="this.classList.toggle('active')">Переключить</button>

До: [Кнопка: Неактивна 🔘]
После: [Кнопка: Активна 🔘✨]

@media screen and (max-width: 600px) {
  .toggle-switch {
    width: 80px;
  }
}

input:checked + .slider::after {
  content: '✔';
  color: white;
}