WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2614
Andev.web
Abrir no Editor
Video
Publique Seu Código
4
Recomendado
31 October 2025
Portfólio de desenvolvedores: Serviços de design e desenvolvimento web
28 February 2025
formulário de registro/login de animação
6 March 2025
Um código por omer
HTML
Copy
<div class="container"> <input type="checkbox" name="check" id="check" hidden=""> <label for="check" class="toggle"> <div class="toggle__circle"></div> </label> <div class="toggle-text"> <span>N</span> <span>FF</span> </div> </div>
CSS
Copy
body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; background-color: #212121; } .container { margin: auto; color: hsl(0, 0%, 30%); font-weight: 900; font-size: 5rem; display: flex; display: flex; align-items: center; justify-content: center; height: 100vh; } .toggle { width: 60px; height: 130px; 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(130px - (.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; } :not(#check:checked)+.toggle { background-color: #f44336; }
JS
Copy
