Interruptores de palanca de estilo de material con CSS puro/CSS3

Vista prévia

Descripción

Material Design inspirado interruptores de encendido/apagado que permite al visitante alternar el estado haciendo clic o tocando. Esta técnica hace uso de los pseudo elementos CSS, los trucos de etiquetas de entrada y las transiciones/transformaciones CSS3.

Funcionamiento

Cree una entrada de casilla de verificación con una etiqueta que se convertirá en un conmutador de alternancia.

<input type="checkbox" id="unchecked" class="cbx hidden"/>
<label for="unchecked" class="lbl"></label>

El núcleo CSS/CSS3 estilos & reglas para el conmutador de alternancia.

.lbl {

position: relative;

display: block;

height: 20px;

width: 44px;

background: #898989;

border-radius: 100px;

cursor: pointer;

transition: all 0.3s ease;
}

.lbl:after {

position: absolute;

left: -2px;

top: -3px;

display: block;

width: 26px;

height: 26px;

border-radius: 100px;

background: #fff;

box-shadow: 0px 3px 3px rgba(0,0,0,0.05);

content: '';

transition: all 0.3s ease;
}

.lbl:active:after { transform: scale(1.15, 0.85); }

.cbx:checked ~ label { background: #6fbeb5; }

.cbx:checked ~ label:after {

left: 20px;

background: #179588;
}

.cbx:disabled ~ label {

background: #d5d5d5;

pointer-events: none;
}

.cbx:disabled ~ label:after { background: #bcbdbc; }

.hidden { display: none; }