WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2446
Andev.web
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
28 February 2025
Ein Code von securearray494
28 August 2025
Archinova: Architektur- und Designstudio | Türkei
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
