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
446
alejandrokundrah
Abrir en el editor
Publica tu código
Recomendado
22 May 2025
Panel de administración
21 July 2025
Cuadro de registro de inicio de sesión 3D Diseño HTML CSS
10 May 2025
Un código de Mete
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) */
