WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS टॉगल स्विच HTML कोड
449
alejandrokundrah
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
29 June 2025
पावर जिम: फिटनेस, प्रशिक्षण और कक्षाएं HTML टेम्पलेट
24 August 2025
टेक ब्लॉग: प्रौद्योगिकी और सॉफ्टवेयर HTML टेम्पलेट
23 January 2025
क्रिएटिवएरे554 द्वारा एक कोड
HTML
Copy
N
FF
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) */