CSS3 solo botón de conmutador iOS

Vista prévia

Descripción

Sin embargo, otra solución CSS/CSS3 para crear un botón de alternancia Switch de estilo iOS animada con transformaciones y transiciones CSS3.

Funcionamiento

Cree una entrada de casilla de verificación para el conmutador.

<label class="switch">

<input type="checkbox" checked>

<span></span>
 </label>

El CSS/CSS3 primario para el switch.

label.switch {


text-align: left;

width: 150px;

height: calc(150px / 2);

border-radius:60px;



background-color:#4ed164;

display: inline-block;

position: relative;

cursor: pointer;
}

label.switch > span {

display: block;

width: 100%;

height: 100%;
}

label.switch > input[type="checkbox"] {

opacity: 0;

position: absolute;
}

 label.switch > span:before, label.switch > span:after {

content: "";

cursor: pointer;

position: absolute;
}

label.switch > input[type="checkbox"]:focus ~ span {

box-shadow: 0 0 0 4px #43b556;
 }

label.switch > input[type="checkbox"]:checked:focus ~ span {

box-shadow: 0 0 0 4px #fff;
}

label.switch > span {

border-radius: 60px;


}

label.switch > span:before {

width: 100%;

height: 100%;

box-sizing: border-box;

background-color: #f1f1f1;

border-radius: 60px;

transition: opacity .2s ease-out .1s, transform .2s ease-out .1s;

transform: scale(1);

opacity: 1;
}

label.switch > span:after{

top: 50%;

z-index: 3;

transition: transform .4s cubic-bezier(0.44,-0.12, 0.07, 1.15);

width: calc(150px / 2);

height: calc(150px / 2);

transform: translate3d(0, -50%, 0);

background-color: #fff;

border-radius: 100%;

box-shadow: 0 2px 5px rgba(0, 0, 0, .3);

}

Anime el conmutador cuando esté activado.

label.switch > input[type="checkbox"]:checked ~ span:before {

transform: scale(0);

opacity: .7;
}

label.switch > input[type="checkbox"]:checked ~ span:after {

transform: translate3d(100%, -50%, 0);
}