Esempio di codice CSS per interruttore a levetta liscio

130 valunovedik

Apri nell'Editor Pubblica il Tuo Codice

Esempio di codice CSS per interruttore a levetta liscio

Consigliato

9 September 2025

Frammento di animazione di caricamento CSS

26 December 2024

cadere

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>

Esempio di codice CSS per interruttore a levetta liscio

Consigliato

Frammento di animazione di caricamento CSS

Un codice di logicarray833

cadere

HTML

CSS

JS

Consigliato

Frammento di animazione di caricamento CSS

Un codice di logicarray833

cadere

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS