SALAMARKESA.com

Alimenta tu cerebro

Cómo crear un botón de tipo switch

Código Fácil

En HTML existe el input de tipo checkbox, que es una cajita que marcas y desmarcas si quieres activar o desactivar una opción.

Se utiliza cuando necesitas tareas del tipo:

Lo que lo hace muy útil para muchos casos.

Pero a simple vista es feo y antiguo:

Soy poco estético, ¿verdad?

Mola más un botón al que le das y elegantemente se activa y desactiva, como un interruptor.

Y eso es lo que vamos a hacer.

Parte HTML

Así:

<label class="botoncito">

<input type="checkbox">

<span class="deslizadora"></span>

</label>

Y eso, a simple vista, es como si no hubiésemos hecho nada.

Pero hemos hecho mucho.

Hemos puesto la misma cosa, pero siguiendo una estructura que nos va a permitir estilizar el asunto con algunas sencillas reglas escritas en CSS.

Parte CSS

Así de simple:

.botoncito{

position: relative;

display: inline-block;

width: 3.6rem;

height: 2rem;

}

.botoncito input {

opacity: 0;

width: 0;

height: 0;

}

.deslizadora{

position: absolute;

cursor: pointer;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: #ccc;

transition: .4s;

}

.deslizadora:before {

position: absolute;

content: "";

height: 1.6rem;

width: 1.6rem;

left: 0.2rem;

bottom: 0.2rem;

background-color: white;

transition: .4s;

}

input:checked + .deslizadora {

background-color: #34a853;

}

input:checked + .deslizadora:before {

transform: translateX(1.6rem);

}

Con lo que el tema se ve así:

Perfecto.

Tú ya lo vas tuneando a tu gusto.

Por ejemplo si quieres que en lugar de un efecto switch o deslizante tenga un efecto rotaswitch, le añades una rotación:

input:checked + .deslizadora:before {

transform: translateX(1.6rem) rotate(90deg);

}

Y ya tiene otro rollito el asunto:

Vale.

Las camisetas más populares