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.

¿Quieres seguir alimentando tu cerebro?

El día a día está lleno de cosas que son posibles gracias a la ciencia.

¿Te gustaría conocer datos y curiosidades sobre una gran variedad de aspectos cotidianos?

Es muy fácil, simplemente apúntate al Club Whatsapp.

Es gratis y solo recibirás contenido de calidad, te lo prometo.

EMPEZAR AHORA

¿Cuánto vale una cerveza?

Te apetece una cervecita y te la tomas.

Un par de monedas o tres, un vasito y tu felicidad aumenta.

Si cuesta una moneda más o menos, quizás no le das mucha importancia.

Pero yo sí.

Crear este sitio web, llenarlo de contenidos de calidad y ofrecértelo gratis sin publicidad molesta, implica un esfuerzo.

Si andas ahorrando, con poco dinero, no voy a pedirte nada.

Pero si no te importa dedicar un mini momento de tu vida a invitarme a medio cafelito o un cuarto de hamburguesa, la verdad es que te lo agradeceré un montón, y me motivará a seguir creando contenido de calidad para la Salamarkesa, y para ti.

Es muy fácil y rápido, y puedes hacerlo pinchando aquí.

Muchas Gracias

Parece que has abierto la página de donaciones.

Y solo por el hecho de haberlo considerado, ya te doy las gracias.

No pretendo comprar una mansión con esta web.

La idea es promover la ciencia, para que todos tengan oportunidad de aprender y expandir sus conocimientos.

Y como no me gusta la publicidad ni el consumir por consumir, pues me niego a cobrar dinero por mostrar anuncios.

Pero claro, el dinero es una herramienta necesaria.

Y poner un precio libre a los contenidos de esta web es lo más elegante que se me ha ocurrido hasta hoy.