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