En este tutorial, crearemos algunos conmutadores de estilo plano que solo utilizan CSS. Esos conmutadores podrían usarse en lugar de las casillas de verificación genéricas, de apariencia opaca.
Por lo general, mientras estamos creando nuevos sitios web, usamos casillas de verificación para dar a los usuarios la opción de seleccionar ciertas cosas en el sitio. La mayoría de las veces, las casillas de verificación estándar parecen aburridas: simplemente no encajan en el diseño moderno y limpio de los sitios web. Por lo tanto, los diseñadores crean sus propias casillas de verificación con estilo o, en otras palabras, conmutadores.
No hay una forma pura de CSS para diseñar una casilla de verificación genérica. Es un elemento cuyo estilo es administrado por el motor del navegador, por lo que diferentes navegadores mostrarían las casillas de verificación de manera diferente. ¿No sería bueno tener más suave? Limpiar casillas de verificación? El uso de algunos trucos CSS puede resolver fácilmente ese problema, y ​​al combinar: checked,: before, y: after pseudo classes con nuestra entrada de casilla de verificación, puede lograr hermosos interruptores de palanca con efectos de transición suaves. ¡Entonces empecemos!

Interruptor plano

 

Interruptor de giro

Estableciendo lo básico:
Usaremos la entrada de la casilla de verificación estándar con una etiqueta, y luego envolveremos esas combinaciones de etiqueta / entrada dentro de un div. Cada estilo será dirigido por una clase que se adjunta al elemento de entrada. Las etiquetas serán dirigidas utilizando la selección de entrada + selección de etiquetas para que no necesiten nombres de clase propios.
   <div class = "block-switch">
      <input id = "toggle-flat" class = "toggle-toggle-flat" type = "checkbox">
      <label for = "toggle-flat"> </label>
      <h4> Interruptor plano </h4>
    </div>

    <div class = "block-switch">
      <input id = "toggle-flip" class = "toggle toggle-flip" type = "checkbox">
      <label for = "toggle-flip" data-on = "Yes" data-off = "No"> </label>
      <h4> Interruptor de giro </h4>
   </div>
Para el CSS, queremos que la casilla de verificación real esté oculta, por lo tanto, aplicaremos todos los estilos que queremos en la etiqueta. Por lo tanto, hacer clic en la etiqueta en realidad "marcará" o "desmarcará" la casilla de verificación. Esto es lo que lograremos:
input.toggle {
  posición: absoluta;
  visibilidad: oculta;
}

input.toggle + label {
  bloqueo de pantalla;
  posición: relativa;
  cursor: puntero;
  esquema: ninguno;
  selección de usuario: ninguna;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: ninguno;
  selección de usuario: ninguna;
}
Escribiendo el estilo para el interruptor (plano):
El labelserá el contenedor del estilo, por lo que le damos un color de fondo, ancho y alto para simular el borde. Luego usamos el :beforepseudo elemento para simular el fondo interno del interruptor que cambia de rojo a verde según el estado. El :afterpseudo elemento será el botón blanco que se encuentra en la parte superior y se desliza de izquierda a derecha al hacer clic. Cambiaremos el color de fondo del :beforepseudo-elemento y la posición del :afterpseudoelemento cuando la entrada tome la pseudo clase :checked, y todo cambiará sin problemas. Así como sigue:
input.toggle-flat + label: antes,
input.toggle-flat + label: después de {
  bloqueo de pantalla;
  posición: absoluta;
  contenido: "";
}
input.toggle-flat + label {
  ancho: 100px;
  altura: 20px;
  color de fondo: # BF2A23;
  -webkit-transición: fondo 0.5s;
  -moz-transición: fondo 0.5s;
  -o-transición: fondo 0.5s;
  transición: fondo 0.5s;
}
input.toggle-flat + label: antes de {
  superior: 2px;
  izquierda: 2px;
  abajo: 2px;
  derecha: 2px;
  -webkit-transición: fondo 0.5s;
  -moz-transición: fondo 0.5s;
  -o-transición: fondo 0.5s;
  transición: fondo 0.5s;
}
input.toggle-flat + label: después de {
  superior: 4px;
  izquierda: 4px;
  inferior: 4px;
  ancho: 45px;
  color de fondo: #fff;
  -webkit-transición: margen 0.5s, fondo 0.5s;
  -moz-transición: margen 0.5s, fondo 0.5s;
  -o-transición: margen 0.5s, fondo 0.5s;
  transición: margen 0.5s, fondo 0.5s;
}
input.toggle-flat: marcado + etiqueta {
  color de fondo: # 00C176;
}
input.toggle-flat: marcado + etiqueta: después de {
  margen izquierdo: 47px;
  color de fondo: #fff;
}
Resultado:

Interruptor plano

Escribiendo el estilo para el interruptor (Flip):
Ahora que hemos terminado con el interruptor de caja plana. Vamos a crear un interruptor giratorio. La vista predeterminada será roja con el texto "OFF", y la vista marcada será verde con el texto "ON". Cuando se hace clic en la etiqueta, el interruptor se voltea, girando 180 grados en su eje x, revelando el lado opuesto. Vamos a rellenar el contenido del conmutador sin marcar / comprobado mediante el uso de atributos de datos. Estos datos-atributos se especificaron en el HTML por datos en y datos-off, cada uno de los cuales poblar el :aftery :beforepseudo elementos respectivamente. Usaremos la propiedad de visibilidad de la cara posterior en el :afterelemento, que inicialmente oculta su parte posterior debido a su punto de inicio en -180 grados. Así como sigue:
input.toggle-flip + label {
  altura: 20px;
}
input.toggle-flip + label: antes, input.toggle-flip + label: after {
  posición: absoluta;
  izquierda: 0;
  abajo: 0;
  derecha: 0;
  ancho: 100px;
  altura: 20px;
  color: #fff;
  text-align: center;
  altura de la línea: 20px;
}
input.toggle-flip + label: antes de {
  color de fondo: # BF2A23;
  contenido: attr (data-off);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transición: -moz-transformada 0.5s;
  -o-transición: -o-transformar 0.5s;
  transición: transformar 0.5s;
  -webkit-backface-visibilidad: oculto;
  -moz-backface-visibilidad: oculto;
  -ms-backface-visibilidad: oculto;
  -o-backface-visibilidad: oculto;
  Backface-visibilidad: oculto;
}
input.toggle-flip + label: después de {
  color de fondo: # 00C176;
  color: #fff;
  contenido: attr (data-on);
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transición: -moz-transformada 0.4s;
  -o-transición: -o-transformada 0.4s;
  transición: transformar 0.4s;
  -webkit-transform: rotateX (180deg);
  -moz-transform: rotateX (180deg);
  -ms-transform: rotateX (180deg);
  -o-transformar: rotateX (180deg);
  transformar: rotateX (180deg);
  -webkit-backface-visibilidad: oculto;
  -moz-backface-visibilidad: oculto;
  -ms-backface-visibilidad: oculto;
  -o-backface-visibilidad: oculto;
  Backface-visibilidad: oculto;
}
input.toggle-flip: marcado + etiqueta: antes de {
  -webkit-transform: rotateX (180deg);
  -moz-transform: rotateX (180deg);
  -ms-transform: rotateX (180deg);
  -o-transformar: rotateX (180deg);
  transformar: rotateX (180deg);
}
input.toggle-flip: marcado + etiqueta: después de {
  -webkit-transform: rotateX (0);
  -moz-transform: rotateX (0);
  -ms-transform: rotateX (0);
  -o-transformar: rotateX (0);
  transformar: rotateX (0);
}
Resultado:

Interruptor de giro

Aquí hay una vista previa de codepen de todo junto!


¡Eso es! Ahora creamos dos diseños planos, espero que hayan disfrutado este tutorial.