Переключатель — это удобный UI-элемент, который позволяет пользователю включать или отключать опцию. Давай разберем, как его создать с нуля!     📌 HTML-структура 

<label class="switch">   <input type="checkbox">   <div class="switch-slider"></div> </label>

Создаем label, внутри которого будет скрытый input (чекбокс) и стилизованный div, который будет играть роль переключателя.   🎨 CSS-стили     1️⃣ Базовый контейнер (.switch)     Отображаем label как inline-flex, чтобы удобно управлять размерами и сделать переключатель кликабельным.     2️⃣ Скрываем чекбокс (.switch input)     Стандартный чекбокс нам не нужен, поэтому скрываем его через display: none;.     3️⃣ Фон переключателя (.switch-slider)     - Задаем ширину 60px, высоту 30px, закругляем углы.     - Добавляем transition, чтобы анимация переключения была плавной.     - При hover цвет немного затемняется.     4️⃣ Ползунок (::before)     - Абсолютно позиционируем его внутри switch-slider.     - Делаем 24px в диаметре, белый круг.     - По умолчанию располагаем его слева (отступ 4px).     5️⃣ Стилизация активного состояния (input:checked)     - Меняем цвет фона (background-color: #18A0FB).     - Двигаем круг вправо (transform: translateX(28px);).     .switch {         display: inline-flex;         cursor: pointer;     }     .switch input {         display: none;     }     .switch-slider {         flex-shrink: 0;         position: relative;         width: 60px;         height: 30px;         background-color: #e6e6e6;         border-radius: 16px;         transition: 0.2s;     }     .switch-slider:hover {         background-color: #d6d6d6;     }     .switch-slider::before {         content: "";         display: block;         position: absolute;         top: 0;         left: 4px;         bottom: 0;         z-index: 2;         width: 24px;         height: 24px;         border-radius: 50%;         margin: auto;         background-color: #fff;         transition: 0.2s;     }     .switch input:checked + .switch-slider {         background-color: #18A0FB;     }     .switch input:checked + .switch-slider:hover {         background-color: #907CFF;     }     .switch input:checked + .switch-slider::before {         transform: translateX(28px);     }     Теперь у нас есть красивый и плавный переключатель, который легко использовать в любом проекте! 🚀     💡 Посмотреть живой пример на CodePen:     👉 CodePen – Переключатель 🚀