Creando Toggle Switches con CSS

El año pasado, con ocasión del Codepen Challenge de junio – Choice UI : Toggles, empecé a hacer varios de estos conmutadores o interruptores usando un input de tipo checkbox y algo de CSS. Acabado el año y viendo que los toggles creados ya llegaban a 10 los añadí a una Colección en Codepen y ahora los publico por aquí, para quien le pueda interesar.

El concepto es muy básico, tendremos un input de tipo checkbox y su label asociado que será donde crearemos los diferentes estilos dependiendo de si el input está checkeado o no. También podemos añadir más elementos de HTML dentro del label si fueran necesarios, o añadir nuevos elementos a continuación del label para crear otros detalles externos, como luces o textos.

Primero vamos con un ejemplo muy básico para entenderlo y después veremos 10 diseños de Toggles con diferentes niveles de dificultad.

HTML

Para este ejemplo simplemente necesitamos un input de tipo checkbox y su label asociado, para agruparlo lo meteremos todo dentro un div con la clase toggle que será el contenedor del toggle :

<div class="toggle">
 <input type="checkbox" id="btn">
 <label for="btn"></label>
</div>

Es importante que el input esté delante del label para poder evaluar la condición :checked del input con CSS y actuar en consecuencia en el label o en otros elementos.

Desde finales de 2023 la pseudo-clase :has de CSS es totalmente compatible con todos los navegadores modernos y gracias a ella se puede simplificar todo el proceso metiendo el input dentro del label y evaluando con :has si el label tiene un input checkeado dentro para modificar, o no, otros elementos en cada caso. Pero es muy reciente todo esto de la compatibilidad de :has, y además yo hice los toggles del modo tradicional (el input delante del label), así que lo vamos a ver de esta manera, más tradicional…

CSS

Con CSS vamos a crear los estilos para convertir el checkbox en un toggle :

.toggle es el contenedor y le ponemos el fondo gris y le redondeamos el borde.

label será el botón, le ponemos un tamaño, un fondo gris algo más oscuro y redondeamos el borde.

input no lo necesitamos ya que lo checkearemos con el label, así que directamente lo ocultamos.

input:checked + label se refiere al estado :checked del input y actúa en el label hermano del input, lo movemos a la derecha y le cambiamos el color.

.toggle {
  background: #eee;
  width: 100px;
  height: 50px;
  padding: 5px;
  border-radius: 50px;
  margin: 50px;
}

label {
  width: 40px;
  height: 40px;
  background: #ccc;
  display: flex;
  cursor: pointer;
  border-radius: 50px;
  transition: all 0.25s ease 0s;
}

input {
  display: none;
}

input:checked + label {
  margin-left: 50px;
  background: #47c;
}

Y ya está, ya tenemos un checkbox convertido en un toggle mucho más vistoso.

Podemos mejorarlo de manera muy simple usando los pseudo-elementos :before y :after para añadir unos pequeños textos informativos:

.toggle:before, .toggle:after {
  content: "ON";
  position: absolute;
  font-size: 12px;
  width: 40px;
  height: 40px;
  text-align: center;
  padding: 10px 0;
  z-index: 0;
  color: #47c;
}

.toggle:after {
  content: "OFF";
  margin-top: -40px;
  margin-left: 50px;
  color: #666;
}

label {
 position: relative;
 z-index: 1;
}

El mismo sistema se usa en los siguientes ejemplos que vamos a ver, añadiendo elementos HTML para crear más detalles, pero todo dependiente del input de tipo checkbox y de si este está checkeado o no.

Ejemplos

Vamos a ver ya los 10 ejemplos de Toggles con diferentes niveles de dificultad en su diseño prometidos al principio de este artículo. Los voy a ordenar de más sencillos a más complejos, aunque no será una escala exacta pues la complejidad dependerá en parte del HTML y por otro lado del CSS.

Todas las demos son editables, puedes cambiar la propiedad personalizada de CSS --sz para modificar el tamaño del toggle en cada demo, o cambiar algún color con las respectivas propiedades personalizadas.

Algunos de los toggles están inspirados en diseños de otros autores encontrados por la web, es esos casos se indica con un enlace al original.

1 Eye Toggle

Primer ejemplo con el efecto de un ojo abriéndose.

See the Pen Eye Toggle – CSS by Josetxu (@josetxu) on CodePen.

En el HTML se añaden unos span dentro del label. El primero .track para crear el fondo del toggle, El segundo .thumb que será el botón redondo incluyendo los párpados, y el último .eye anidado dentro de .thumb y en el que dibujaremos el ojo.

En el CSS se aprovechan los pseudo-elementos :before y :after del elemento .thumb para hacer los párpados. Se crean animaciones para cambiar el color de fondo a azul, mover el ojo y abrir cada uno de los párpados.

2 Rail Toggle

Otro ejemplo con un raíl interno que se enciende al activarlo.

See the Pen Rail Toggle – CSS by Josetxu (@josetxu) on CodePen.

En el HTML se añade un span dentro del label y a continuación del label añadimos un div con la clase .rail que lleva otro span dentro para crear el raíl.

En el CSS creamos el botón con el label y su span anidado, y con el elemento .rail y su span anidado hacemos el raíl a dos colores. Añadimos una pequeña animación para mover el botón y listo.

3 Skull Toggle

En el siguiente ejemplo se muestra una calavera que hace las veces de botón y un brazo de esqueleto que mueve el botón al checkearlo.

See the Pen Skull Toggle – CSS by Josetxu (@josetxu) on CodePen.

Aquí el HTML es algo más complejo ya que dentro del label se crean múltiples elementos, por un lado la calavera y la mandíbula, y por otro el brazo y la mano con todos sus huesecillos.

El CSS no se queda atrás, se pinta la calavera y la mandíbula como si fueran el botón y se crean todos los hueso del brazo y de la mano para que muevan el botón. Se necesitan varias animaciones con diferentes valores de animation-duration y animation-delay para mover la calavera, mover el brazo, y para cambiar ligeramente el color.

4 Trick/Treat Toggle

Muy parecido al anterior jugando con el «truco o trato» típico de Halloween.

See the Pen Trick/Treat Toggle – CSS by Josetxu (@josetxu) on CodePen.

En el HTML, además del brazo de esqueleto, también tenemos por otro lado el brazo humano creado del mismo modo con varios elementos span.

El CSS , aparte de llevar casi lo mismo que el anterior toggle, lleva una animación más para mover el brazo humano independientemente del brazo de esqueleto. También se modifica la calavera haciéndola tipo Jack de la peli Pesadilla antes de Navidad de Tim Burton. Y se convierte en un caramelo (o eso he intentado) para entrar en la temática del «truco o trato».

5 Modern Lighted Toggle

Un ejemplo tirando a más moderno y con un efecto de iluminado.

See the Pen Modern Lighted Toggle – CSS by Josetxu (@josetxu) on CodePen.

En el HTML dentro del label tenemos, por un lado un span con la clase track que a su vez contiene otro span con la clase txt, y por otro lado un span con la clase thumb que será el botón.

En el CSS creamos las animaciones pertinentes para mover el botón y cambiar el color de fondo con el pseudo-elemento :before del elemento .track . Los textos de ON y OFF están ambos escritos desde un principio en los pseudo-elementos :before y :after de .txt y simplemente se muestra uno u otro al mover el botón.

6 Elastic Toggle

Un intento de hacer un toggle con efecto elástico.

See the Pen Elastic Toggle – CSS by Josetxu (@josetxu) on CodePen.

En el HTML la única novedad es un elemento div con la clase lights con un par de elementos span dentro que nos serviran para hacer las dos luces.

Con CSS y animaciones deformamos el botón al moverlo, le cambiamos los colores al botón y apagamos o encedemos la luz que corresponda.

7 Dark Blue Toggle

Un ejemplo en azul oscuro con luz de encendido.

See the Pen Dark Blue Toggle – CSS by Josetxu (@josetxu) on CodePen.

El HTML es muy simple, un span con la clase thumb dentro del label que será el botón y un elemento div con la clase light para hacer la luz azul.

Con CSS las típicas animaciones, movemos el botón, encendemos el reflejo azul del botón y encendemos la luz situada a la derecha del botón indicando que está activado.

8 Rolling Toggle

Muy parecido al anterior pero el botón rueda en lugar de desplazarse.

See the Pen Rolling Toggle – CSS by Josetxu (@josetxu) on CodePen.

El HTML es prácticamente igual que el anterior toggle salvo por el elemento span con clase light que esta situado dentro del span con clase thumb, en lugar de estar a continuación del label.

El CSS es también muy parecido, se cambian los colores de la luz (rojo y verde), se crea la animación de rodar el botón en lugar de moverlo, se añaden los símbolos de encendido y apagado que se ocultan al activar o desactivar el toggle, y se modifica la sombra del fondo para darle un efecto de profundidad diferente.

9 Ergonomic Toggle

Un toggle con mando ergonómico y doble luz de activado o desactivado.

See the Pen Ergonomic Toggle – CSS by Josetxu (@josetxu) on CodePen.

El HTML es exactamente el mismo que el del Elastic Toggle, el label por un lado y las luces por el otro.

Con el CSS se complica un poco la cosa creando todo el dibujo del botón, con sus sombras y sus luces, la rejilla del fondo que queda bastante chula, y el efecto de hundido que se consigue con la propiedad box-shadow directamente sobre el label.

10 Toothed Toggle

Y el último toggle con un efecto de dientes, luces de encendido y apagado, y textos de ON y OFF.

See the Pen Toothed Toggle – CSS by Josetxu (@josetxu) on CodePen.

El HTML es igual que el del anterior toggle, pero dentro del label se añaden unos span con las clases track-top y track-bot , cada uno con varios elementos span dentro para crear los dientes.

En CSS solo se añade como novedad las animaciones del movimiento de los dientes, junto a las ya clásicas de mover el botón y encender o apagar las luces y los reflejos.

Dejo por aquí un enlace a la Colección CSS Toggles en Codepen que contiene los 10 Toggles mostrados en este artículo y que irá creciendo con nuevos toggles que tengo en mente.

A togglear…!!!