Generador de toggle switch (botón de encendido/apagado) CSS
Ajusta el tamaño y los colores y prueba la vista previa. El código usa un checkbox real, así que funciona en formularios y con el teclado.
Cómo usarBotón de encendido/apagado sin JavaScript
Disponible en: 
Generador de toggle switch (botón de encendido/apagado) CSS: para qué sirve
El botón de encendido/apagado se usa en preferencias, formularios de registro y configuraciones. Este generador crea el interruptor con un checkbox real estilizado con CSS, sin JavaScript: guarda el estado, funciona con teclado y toque, se envía junto con el formulario y el lector de pantalla lo anuncia como activado o desactivado gracias a role=switch.
Ajustas el ancho, el alto, las esquinas y los colores, y pruebas el resultado activado, desactivado y deshabilitado. El código incluye el foco visible, la transición suave que respeta a quienes prefieren menos movimiento y el modo de alto contraste.
Cómo usar
- Ajusta el tamaño y las esquinas.
- Elige los colores y el texto de la etiqueta.
- Copia el HTML y el CSS.
Cuándo usar
- Preferencias de notificaciones.
- Modo oscuro del sitio.
- Aceptación de términos en un formulario.
Preguntas frecuentes
¿Necesita JavaScript?
No para funcionar. Solo si quieres hacer algo en el momento en que el botón cambia, como guardar la preferencia; entonces basta escuchar el evento change del input.
¿Qué tamaño usar en el celular?
El área táctil debe ser de al menos 24 por 24 px según WCAG 2.2, y lo recomendado para el dedo es cerca de 44 px. Como el texto junto al botón también forma parte del label, aumenta el área en la que se puede hacer clic.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.