Cómo crear un interruptor con CSS

Por
Imagen de César Álvarez
César Álvarez
· 05/10/2016

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

  1. <label class="switch">
  2.   <input type="checkbox">
  3.   <div class="slider round"></div>
  4. </label>

 

Y ahora vamos con el css:

CSS

  1. /* Formateamos el label que servirá de contenedor */
  2. .switch {
  3. position: relative;
  4. display: inline-block;
  5. width: 60px;
  6. height: 34px;
  7. }
  8.  
  9. /* Ocultamos el checkbox html */
  10. .switch input {
  11. display:none;
  12. }
  13.  
  14. /* Formateamos la caja del interruptor sobre la cual se deslizará la perilla de control o slider */
  15. .slider {
  16. position: absolute;
  17. cursor: pointer;
  18. top: 0;
  19. left: 0;
  20. right: 0;
  21. bottom: 0;
  22. background-color: #ccc;
  23. -webkit-transition: .4s;
  24. transition: .4s;
  25. }
  26.  
  27. /* Pintamos la perilla de control o slider usando el selector before */
  28. .slider:before {
  29. position: absolute;
  30. content: "";
  31. height: 26px;
  32. width: 26px;
  33. left: 4px;
  34. bottom: 4px;
  35. background-color: white;
  36. -webkit-transition: .4s;
  37. transition: .4s;
  38. }
  39.  
  40. /* Cambiamos el color de fondo cuando el checkbox esta activado */
  41. input:checked + .slider {
  42. background-color: #E27AD8;
  43. }
  44.  
  45. /* Deslizamos el slider a la derecha cuando el checkbox esta activado */
  46. input:checked + .slider:before {
  47. -webkit-transform: translateX(26px);
  48. -ms-transform: translateX(26px);
  49. transform: translateX(26px);
  50. }
  51.  
  52. /* Aplicamos efecto de bordes redondeados en slider y en el fondo del slider */
  53. .slider.round {
  54. border-radius: 34px;
  55. }
  56.  
  57. .slider.round:before {
  58. border-radius: 50%;
  59. }

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
Compartir 

Trabajos relacionados

Plataforma de reclamaciones online
Fun musical spanish