WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Código HTML del interruptor de palanca CSS
272
alejandrokundrah
Abrir en el editor
Publica tu código
Recomendado
5 June 2025
Página de autenticación Iniciar sesión/Registrarse
7 August 2025
diales de volumen
14 January 2025
Ejemplo de página web de portafolio
HTML
Copy
<div class="container"> <input hidden="" id="check" name="check" type="checkbox"> <label class="toggle" for="check"> <div class="toggle__circle"></div> </label> <div class="toggle-text"> <span>N</span> <span>FF</span> </div> </div>
CSS
Copy
.container { margin: auto; color: hsl(0, 0%, 30%); font-weight: 900; font-size: 6rem; display: flex; } .toggle { width: 60px; height: 155px; background-color: hsl(0, 0%, 80%); border-radius: 1.7rem; padding: .25rem 0; cursor: pointer; display: flex; justify-content: center; transition: background-color 300ms 300ms; } .toggle__circle { width: 50px; height: 50px; background-color: hsl(0, 0%, 95%); border-radius: 50%; margin-top: calc(155px - (.25rem * 2) - 50px); transition: margin 500ms ease-in-out; } .toggle-text { display: flex; flex-direction: column; line-height: .8; } #check:checked + .toggle > .toggle__circle { margin-top: 0; } #check:checked + .toggle { background-color: #41a63c; } body{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
