WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS टॉगल स्विच HTML कोड
45
alejandrokundrah
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
17 July 2025
कॉउचर एटेलियर डैशबोर्ड HTML टेम्पलेट
20 May 2025
ग्रेगरी द्वारा एक कोड
24 May 2025
testingai द्वारा एक कोड
HTML
Copy
<div class="container"> <input hidden="" id="check" name="check" type="checkbox"> <label class="toggle" for="check"> <div class="toggle__circle"></div> </label> <div class="toggle-text"> <span>N</span> <span>FF</span> </div> </div>
CSS
Copy
.container { margin: auto; color: hsl(0, 0%, 30%); font-weight: 900; font-size: 6rem; display: flex; } .toggle { width: 60px; height: 155px; 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(155px - (.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; } body{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
