Cómo crear un interruptor con CSS

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.

HTML

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.

  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. }

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

19 − dos =