Webleb - UI Elements - CSS Smooth Toggle Switch Code Example

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>

CSS

JS

CSS Smooth Toggle Switch Code Example

Recommended