WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botón de alternancia HTML CSS
4499
dev_b
Abrir en el editor
Video
Publica tu código
Recomendado
15 July 2025
Ejemplo de formulario de inicio de sesión animado HTML
20 September 2025
Fuegos artificiales animados con CSS, luciérnagas y girasoles
28 June 2025
Navegación de la barra lateral HTML del panel de control de OMIC EST
HTML
Copy
<!doctype html> <html lang="en"> <head> <title>CSS Toggle</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> </body> </html>
CSS
Copy
body { background-color: #212121; display: flex; height: 100vh; justify-content: center; align-items: center; overflow: hidden; } .switch { font-size: 17px; position: relative; display: inline-block; width: 3.5em; height: 2em; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; inset: 0; border: 2px solid #414141; border-radius: 50px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .slider:before { position: absolute; content: ""; height: 1.4em; width: 1.4em; left: 0.2em; bottom: 0.2em; background-color: white; border-radius: inherit; transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); } .switch input:checked + .slider { box-shadow: 0 0 20px rgba(9, 117, 241, 0.8); border: 2px solid #0974f1; } .switch input:checked + .slider:before { transform: translateX(1.5em); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
