Botón de alternancia suave con HTML 5 y CSS3

Vista prévia

Descripción

Un botón de alternancia creado con HTML5 y CSS3 que convierte un campo de entrada de casilla de verificación en un conmutador de alternancia animado como se ve en iOS. La palanca utiliza SVG para alternar iconos por lo que sólo funciona en los navegadores modernos que soportan HTML 5 SVG elemento y CSS3 propiedades.

Funcionamiento

Estructura HTML de marcado.

<div class="toggle-btn">
<div class="toggle-round">
<input type="checkbox" name="round-test" id="round-test" />
<label for="round-test"></label>
<figure class="icon-unchecked"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" version="1.1" viewBox="0 0 16 16" width="16px">
<g fill="none" fill-rule="evenodd" id="Icons with numbers" stroke="none" stroke-width="1">
<g fill="#000000" id="Group" transform="translate(-144.000000, -480.000000)">
<path d="M144,480 L160,480 L160,496 L144,496 Z M145,481 L145,495 L159,495 L159,481 Z M145,481" id="Rectangle 152 copy" />
</g>
</g>
</svg> </figure>
<figure class="icon-checked">
<svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink">
<title/>
<defs/>
<g fill="none" fill-rule="evenodd" id="Icons with numbers" stroke="none" stroke-width="1">
<g fill="#000000" id="Group" transform="translate(0.000000, -432.000000)">
<path d="M0,432 L7,432 L7,439 L0,439 Z M9,432 L16,432 L16,439 L9,439 Z M0,441 L7,441 L7,448 L0,448 Z M9,441 L16,441 L16,448 L9,448 Z M9,441" id="Rectangle 184"/>
</g>
</g>
</svg> </div>
</div>

Los estilos CSS.

.toggle-btn {
position: relative;
max-width: 200px;
height: 50px;
height: 50px;
line-height: 50px;
}
.toggle-btn .toggle-round {
margin: 0 auto;
width: 75%;
height: 100%;
line-height: 50px;
border: 10px solid #FFFFFF;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.toggle-btn input[type="checkbox"] {
position: absolute;
left: -2500px;
}
.toggle-btn label {
display: block;
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
}
.toggle-btn .toggle-round label:before {
position: absolute;
content: " ";
top: 50%;
margin-top: -18px;
margin-left: 10px;
display: inline-block;
background: #FFFFFF;
width: 36px;
height: 36px;
-webkit-border-radius: 36px;
-moz-border-radius: 36px;
border-radius: 36px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
-moz-transition: -moz-transform 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
transition: transform 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}
.toggle-btn input[type="checkbox"]:checked ~ label:before {
-webkit-transform: translate3d(95px, 0, 0);
-moz-transform: translate3d(95px, 0, 0);
transform: translate3d(95px, 0, 0);
}
.toggle-btn figure {
position: absolute;
top: 50%;
margin-top: 2px;
}
.toggle-btn figure g {
-webkit-transition: fill 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
-moz-transition: fill 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
transition: fill 750ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}
.toggle-btn figure.icon-unchecked {
left: -65px;
}
.toggle-btn figure.icon-checked {
right: -65px;
}
.toggle-btn figure.icon-unchecked g {
fill: rgba(0,0,0, 0.5);
}
.toggle-btn figure.icon-checked g {
fill: #FFFFFF;
}
.toggle-btn input[type="checkbox"]:checked ~ figure.icon-unchecked g {
fill: #FFFFFF;
}
.toggle-btn input[type="checkbox"]:checked ~ figure.icon-checked g {
fill: rgba(0,0,0, 0.5);
}