Cómo crear un interruptor con CSS

Cada día es más común encontrar elementos de formularios totalmente personalizados que mejoran la experiencia del usuario.

En este artículo vamos a ver como convertir el típico checkbox en un interruptor mucho más moderno y atractivo visualmente.

 

Vamos a ver un ejemplo de cómo quedaría este interruptor en las típicas opciones de un área de usuario:

 

    Publicar mi dirección de email

 

    Recibir boletín de novedades

 

    Recibir emails de notificaciones

 

Primero necesitaremos definir el html. Vamos a usar las etiquetas label e input de tipo checkbox y un div extra que servirá para hacer el truco css.

HTML

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

 

Y ahora vamos con el css:

CSS

/* Formateamos el label que servirá de contenedor */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
 
/* Ocultamos el checkbox html */
.switch input {
  display:none;
}
 
/* Formateamos la caja del interruptor sobre la cual se deslizará la perilla de control o slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
 
/* Pintamos la perilla de control o slider usando el selector before */
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
 
/* Cambiamos el color de fondo cuando el checkbox esta activado */
input:checked + .slider {
  background-color: #E27AD8;
}
 
/* Deslizamos el slider a la derecha cuando el checkbox esta activado */ 
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
 
/* Aplicamos efecto de bordes redondeados en slider y en el fondo del slider */
.slider.round {
  border-radius: 34px;
}
 
.slider.round:before {
  border-radius: 50%;
}

Y esto es todo amigos, ahora ya sabemos como como crear un toggle switch o interruptor con css. Fácil, rápido y para toda la familia!!

Foto principal: Pierre Chatel