WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Toggle On-Off
2613
Andev.web
Open In Editor
Video
Publish Your Code
4
Recommended
18 May 2024
Emoji Toggle
30 March 2025
+- Toggle
9 September 2024
Emoji Toggle
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
