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
723
alejandrokundrah
Abrir en el editor
Publica tu código
Recomendado
23 July 2024
Iniciar sesión de vidrio
29 November 2024
Un código de efficientapp58
16 May 2025
Un código de Maxi-Digital
HTML
Copy
N
FF
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) */