Botón switch estilo iOS utilizando CSS3 y jQuery

Como podréis ver, la revolución móvil ha llegado. Ha llegado el momento de construir aplicaciones web móviles para tus proyectos web. Muchas plataformas de terceros, como Apache Córdoba y Phonegap te ofrecen todo lo necesario para poder convertir tus aplicaciones web en aplicaciones móviles nativas. En este tutorial te ayudaremos a diseñar un botón switch estilo iOS mediante HTML, CSS y jQuery. Especialmente me encantan los pseudo elementos CSS: before y: after, ya que te ayudan a reducir al mínimo el código HTML. ¿Quieres saber cómo diseñar este estilo de botón? Pues estate atento...

Código HTML

Debes incluir un checkbox y div llamado switch dentro del tag label.

<label>
<input type="checkbox" name="checkboxName" class="checkbox"/>
<div class="switch"></div>
</label>

Contenedor switch

Vamos a dar estilo al contenedor switch

.switch 
{
width: 62px;
height: 32px;
background: #E5E5E5;
z-index: 0;
margin: 0;
padding: 0;
appearance: none;
border: none;
cursor: pointer;
position: relative;
border-radius:16px; //IE 11
-moz-border-radius:16px; //Mozilla
-webkit-border-radius:16px; //Chrome and Safari
}

Después de aplicar el código del border-radius.

Switch before

El :before es un pseudo elemento, inserta estilo/contenido antes del elemento DOM

.switch:before 
{
content: ' ';
position: absolute;
left: 1px;
top: 1px;
width: 60px;
height: 30px;
background: #FFFFFF;
z-index: 1;
border-radius:16px; //IE 11
-moz-border-radius:16px; //Mozilla
-webkit-border-radius:16px; //Chrome and Safari
}

Switch after

El :after es un pseudo elemento, inserta estilo/contenido después del elemento DOM. Aquí, la duración de la transición ayuda a enriquecer el efecto de la animación.

.switch:after 
{
content: ' ';
height: 29px;
width: 29px;
border-radius: 28px;
z-index: 2;
background: #FFFFFF;
position: absolute;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
top: 1px;
left: 1px;
-webkit-box-shadow: 0 2px 5px #999999;
box-shadow: 0 2px 5px #999999;
}

SwitchOn :after :before

Aplica el color de fondo a verde y lo mueve

.switchOn , .switchOn:before
{
background: #4cd964 !important;
}
.switchOn:after
{
left: 21px !important;
}

jQuery

En la sentencia $('.switch').click(function(){}, switch es el nombre de la case del DIV. Utilizando jQuery toggleClass añadimos y eliminamos la clase switchOn cuando hacemos clic con el ratón.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{

$('.switch').click(function()
{
$(this).toggleClass("switchOn");
});

});
</script>

CSS Final

Puedes ocultar el input checkbox utilizando display:none

.checkbox{display:none}
.switch
{
width: 62px;
height: 32px;
background: #E5E5E5;
z-index: 0;
margin: 0;
padding: 0;
appearance: none;
border: none;
cursor: pointer;
position: relative;
border-radius:16px; //IE 11
-moz-border-radius:16px; //Mozilla
-webkit-border-radius:16px; //Chrome and Safari
}
.switch:before
{
content: ' ';
position: absolute;
left: 1px;
top: 1px;
width: 60px;
height: 30px;
background: #FFFFFF;
z-index: 1;
border-radius:16px; //IE 11
-moz-border-radius:16px; //Mozilla
-webkit-border-radius:16px; //Chrome and Safari
}
.switch:after 
{
content: ' ';
height: 29px;
width: 29px;
border-radius: 28px;
background: #FFFFFF;
position: absolute;
z-index: 2;
top: 1px;
left: 1px;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
-webkit-box-shadow: 0 2px 5px #999999;
box-shadow: 0 2px 5px #999999;
}
.switchOn , .switchOn:before
{
background: #4cd964 !important;
}
.switchOn:after
{
left: 21px !important;
}

Fuente: 9lessons.info

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR