31-05-2013

Truco: Botones de 2 estados usando solo CSS

Un botón de dos estados es como un interruptor, puede estar activado o desactivado. Para crear y manejar un botón de este estilo, normalmente utilizaríamos Javascript y un par de clases CSS para cambiar entre los dos estados. Esta no es una mala solución, pero con un poco de ingenio podemos obtener el mismo efecto utilizando únicamente el CSS, lo que supone que nos ahorramos esas líneas de Javascript que pueden introducir algo de lentitud en el sitio web.

Primero, preguntémonos, ¿a qué elemento HTML podemos recurrir para obtener un estado booleano (verdadero o falso)? A las checkboxes, es decir, esto:

<input type="checkbox" id="micheck1" />
<label for="micheck1">Una checkbox</label>

Para convertir esto en un botón hace falta mucha modificación por CSS. Voy a tratar de hacer algo sencillo para que sea fácil de adaptar a distintos estilos:

#micheck1 {
	display: none;
}
#micheck1+label {
	display: inline-block;
	border: 2px solid black;
	font-size: 14px;
	padding: 3px 6px;
	background: #eaeaea;
	-webkit-user-select: none; /* Evitamos que se seleccione el texto */
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

Ver el código en acción

Ahora viene la magia. Imagino que ya os iréis suponiendo cómo vamos a convertir esto en un botón de doble estado. Vamos a utilizar el pseudoselector :checked de CSS:

#micheck1:checked+label {
	background: #000;
	color: #fff;
}

Ver el código en acción

Finalmente, un toque de CSS avanzado que nos permite cambiar el texto de la etiqueta según el estado.

#micheck1+label:after {
	content: "Desactivado";
}
#micheck1:checked+label:after {
	content: "Activado!";
}
<input type="checkbox" id="micheck1" />
<label for="micheck1"></label>

Ver el código en acción

¡Y listo! Un botón de dos estados simple utilizando solamente código CSS. Además, es muy sencillo comprobar si está activado o desactivado desde Javascript utilizando document.querySelector("#micheck1").checked