WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1907
Andev.web
Abrir no Editor
Publique Seu Código
Recomendado
31 January 2025
botão iraniano
18 July 2025
Ilusão de rolagem infinita
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
