Interruptor de palanca CSS Smooth

91 valunovedik

Abrir en el editor Publica tu código

Recomendado

11 March 2025

Formulario de inicio de sesión HTML avanzado

28 November 2024

Control deslizante horizontal puro con menú deslizante

21 August 2024

Plantilla de portafolio HTML creativo

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>

Recomendado

Formulario de inicio de sesión HTML avanzado

Control deslizante horizontal puro con menú deslizante

Plantilla de portafolio HTML creativo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS