Esempio di codice CSS per interruttore a levetta liscio

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

20 April 2025

Codice sorgente HTML5 del gioco Iron Snout

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

palestra

FNAF

Codice sorgente HTML5 del gioco Iron Snout

HTML

CSS

JS

Consigliato

palestra

FNAF

Codice sorgente HTML5 del gioco Iron Snout

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS