Что взять за основу?
Есть несколько вариантов, например с помощью js добавлять (удалять) класс, который определяет состояние переключателя...
Мы сделаем попроще, на чистом css3, правда не гарантирую совместимость с деревянными браузерами.
Родитель должен быть независимым
Создаем родительский label, который определит ширину и высоту блока, можно определять это внутренним элементом, но не сегодня=)
Label я выбрал не просто так, его атрибут "for" поможет нам работать с checkbox, который будет отвечать за состояние переключателя.
Теперь зададим черновую стилистику.
Для label поставим высоту 30px, а ширину 50px, "position: relative" чтобы дочерние элементы выравнивались по нашему лейбл, а также "display: inline-block" т.к. справа у нас скорей всего будет текст.
Скрываем input, но не через display т.к он не будет работать. Задаем "opacity: 0; position: absolute" чтобы не мешал другим элементам в родителе; а "top: 0" и "left: 0" чтобы не убежал за пределы label.
Нужен фон
Фон задаем для следующего элемента, но сперва создадим его, я буду использовать span т.к. при вложении div в label будет ругаться редактор, а браузер может что-то учудить (все это есть в спецификации)
Продолжаем! Создаем 2 span элемента и придумываем классы на свой вкус, я назову их "true-check__bg" и "true-check__circle"
Первый сразу растягиваем во всю ширину "position: absolute; top: 0; left: 0; width: 100%; height: 100%" и задаем фон "background-color: rgb(221, 221, 221)"
Второму зададим фиксированную ширину и высоту, отставим 3 пикселя сверху и снизу для отступа "width: 24px; height: 24px; top: 3px; left: 3px".
Вы спросите, а почему я не сделал это паддингами для родителя? Все просто, фон у нас задан дочерним элементом (потому что css не позволяет обращаться к родительскому элементу). И не забываем про фон "background-color: white". Скорей всего ничего не поменялось и это не удивительно, ведь мы забыли задать "display:block", чтобы ширина и высота применились, а также "position: relative; z-index: 2" для работы отступов и отображения элемента поверх фона
Теперь закруглим наши элементы. Родительскому label зададим "border-radius: 30px". Закругление не сработало, а все потому, что дочерний элемент с фоном не обрезается родительским. Решается это просто "overflow: hidden". Для круга проделаем тоже самое, только радиус можно указать в процентах, а overflow не прописывать.
Теперь зададим тень для нашего круга "box-shadow: 1px 0px 3px 0px rgba(174, 174, 174, 0.9);" подбирал на свой вкус и взгляд, поэтому не судите строго)
Самое интересное начинается
Теперь будем работать над самым главным, изменением состояний. Привязка будет к состоянию checked, с помощью псевдокласса :checked
Теперь у нас есть следующая конструкция ".true-check input:checked", но как она нам поможет? Вот тут и вступает в силу комбинатор "~" (https://developer.mozilla.org/ru/docs/Web/CSS/CSS_%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B - тут вся информация)
проведем сперва операцию над фоном, сделав его зеленым.
Для этого пишем: ".true-check input:checked ~ .true-check__bg {background-color: rgb(107, 223, 89);}", теперь кликаем по нашему переключателю и лицезреем часть волшебства.
Теперь перейдем к самому кругу, опишем его движение. Но перед этим добавим ему плавности, а также фону с помощью свойства transition, дадим ему значение 0,3s
У круга задаем ".true-check input:checked ~ .true-check__circle { left: 21px;}"
Готово. Весь код по ссылке: https://codepen.io/oriva/pen/wvBYzEb