Создаём красивый checkbox с минимум стилей и без JavaScript

В этом уроке мы сверстаем красивый переключатель на основе элемента checkbox.
JavaScript нам не понадобится, будут только стили и минимум вёрстки.
Сразу показываю, что в итоге должно получиться.

Вначале обозначим сам элемент:

<input class="checkbox" type="checkbox" id="golos"/>
<label for="golos"></label>

Вначале для всех элементов зададим свойство box-sizing, равное border-box. Оно заставит свойства width и height включать в себя значения полей и границ, но не отступов.

Теперь придадим лейблу форму прямоугольника с закруглёнными углами и сразу же подкрасим его:

.checkbox + label {
  display: inline-block;
  position: relative;
  width: 300px;
  height: 130px;
  background: linear-gradient(to right, #fd1a15 0, #fc8b34 45%, #7fd03e 55%, #007177 100%) 0 0;
  background-size: 650px 100%;
  border-radius: 70px;
  padding: 7px;
  cursor: pointer;
  transition: all 500ms ease;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2) inset;
}

Затем воспользуемся псевдоклассом before и добавим в лейбл кружок с надписью Off

.checkbox + label:before {
  content: "Off";
  width: 116px;
  height: 116px;
  position: absolute;
  left: 7px;
  top: 7px;
  border-radius: 100%;
  background: #fff;
  text-align: center;
  line-height: 116px;
  font-family: "Cabin", sans-serif;
  font-size: 35px;
  font-weight: bold;
  color: #fd1a15;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: left 500ms ease, color 500ms ease, -webkit-transform 150ms ease;
  transition: left 500ms ease, color 500ms ease, transform 150ms ease;
  transition: left 500ms ease, color 500ms ease, transform 150ms ease, -webkit-transform 150ms ease;
}

И буквально в две строки добавим псевдоэлементу before анимацию при нажатии:

.checkbox + label:active:before {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}

Чтобы у отмеченного чекбокса был другой фон - достаточно его лишь подвинуть

.checkbox:checked + label {
  background-position-x: -350px;
}

В самом первом блоке стилей можете увидеть background-size: 650px 100%; - это значит, что размер фона 650px в ширину, который мы можем смело подвинуть на 350px.

Ну и осталось подвинуть содержимое before у лэйбла и поменять в нём текст.

.checkbox:checked + label:before {
  content: "On";
  color: #007177;
  left: 177px;
}

Последним штрихом прячем checbox

.checkbox {
  display: none;
}

Таким нехитрым образом мы сделали интерактивный элемент без использования JS.