WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML टॉगल स्विच कोड स्निपेट
30
LittlleSquirtle
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
15 July 2025
फ्रेंच उद्धरण जनरेटर HTML टेम्पलेट
18 December 2024
Slowcode552 द्वारा एक कोड
9 December 2024
एक कोड, slowlogic992 द्वारा
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Switch</title> </head> <body> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> </body> </html>
CSS
Copy
*, ::before, ::after{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; display: flex; justify-content: center; align-items: center; } .switch{ width: 100px; height: 50px; position: relative; display: inline-block; } .switch input{ opacity: 0; width: 0; height: 0; } .slider{ position: absolute; background-color: rgb(200, 190, 198); border-radius: 30px; inset: 0; transition: background 0.3s; cursor: pointer; } .slider::before{ content: ""; position: absolute; width: 40px; height: 40px; top: 5px; left: 5px; background-color: white; border-radius: 50%; transition: left 0.3s ease; } input:checked + .slider{ background-color: rgb(93, 204, 93); } input:checked + .slider::before{ left: 55px; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
