WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2443
Andev.web
Abrir no Editor
Publique Seu Código
Recomendado
27 November 2024
Carro
15 September 2024
Tulipa Roxa
19 June 2025
Codificando a realidade
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
