4 метода создания кнопки переключения с помощью CSS - Fcodenotes

Вот несколько способов создания переключателя с помощью CSS:

Метод 1: использование флажка Hack
HTML:

<label class="toggle-btn">
  <input type="checkbox">
  <span class="slider"></span>
</label>

CSS:

«»;
высота: 26 пикселей;
ширина: 26 пикселей;
слева: 4 пикселя;
снизу: 4 пикселя;
цвет фона: белый;
border-radius: 50%;
переход:.4 с;
}
.toggle-btn input[type=”checkbox”]:checked +.slider {
background-color: #2196F3;
}
.toggle-btn input[type=”checkbox”]:checked +.slider:before {
Transform: TranslateX(26px);

Метод 2. Использование переходов CSS3
HTML:

<label class="toggle-btn">
  <input type="checkbox">
  <span class="slider"></span>
</label>

CSS:

Метод 3: использование Flexbox
HTML:

<label class="toggle-btn">
  <input type="checkbox">
  <span class="slider"></span>
</label>

CSS:

«»;
позиция: абсолютная;
ширина: 14 пикселей;
высота: 14 пикселей;
радиус границы: 50%;
цвет фона: белый;
слева : 0;
справа: 0;
поле: 0 авто;
снизу: 2 пикселя;
переход:.4 с;
}
.toggle-btn input[type=”checkbox ”]:checked +.slider:before {
Transform: TranslateX(16px);

Метод 4. Использование CSS Grid
HTML:

<label class="toggle-btn">
  <input type="checkbox">
  <span class="slider"></span>
</label>

CSS: