CSS स्मूथ टॉगल स्विच कोड उदाहरण

358 valunovedik

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

24 June 2025

मेटे का एक कोड

19 March 2025

HTML और CSS का उपयोग करके वेबसाइट डिज़ाइन

19 November 2025

डॉट्स के साथ CSS एनिमेटेड लोडिंग स्क्रीन

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smooth Toggle Switch</title>
    <style>
        /* Basic styling for demonstration */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f9;
            margin: 0;
        }

/* --- Toggle Switch Design --- */

.toggle-switch {
            display: inline-block;
            position: relative;
            width: 60px; /* Width of the track */
            height: 34px; /* Height of the track */
        }

/* Hide default HTML checkbox */
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

/* The Slider (Track) */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc; /* Off state color */
            transition: background-color 0.4s ease-in-out; /* Smooth color transition */
            border-radius: 34px; /* Fully rounded track */
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        }

/* The Knob/Handle (using pseudo-element) */
        .slider:before {
            content: "";
            position: absolute;
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            border-radius: 50%;
            /* Primary smooth transition on movement */
            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Smooth, slightly bouncy transition */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

/* When the checkbox is checked (ON State) */
        input:checked + .slider {
            background-color: #4CAF50; /* On state color (Green) */
        }

/* Move the knob/handle to the right for the ON State */
        input:checked + .slider:before {
            transform: translateX(26px); /* 60px track - 4px padding * 2 sides - 26px knob = 26px movement */
        }

/* Optional: Add a slight press effect when toggling */
        .slider:active:before {
            width: 30px; /* Slightly squash the knob on press */
        }
        
        input:checked + .slider:active:before {
            transform: translateX(22px); /* Adjust movement when squashed */
        }

</style>
</head>
<body>

</body>
</html>

अनुशंसित

मेटे का एक कोड

HTML और CSS का उपयोग करके वेबसाइट डिज़ाइन

डॉट्स के साथ CSS एनिमेटेड लोडिंग स्क्रीन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS