DesarrolloLibre

Desarrollo Web, Android y mucho más

02-08-2016

En esta entrada veremos cómo crear un sencillo botón que se transforma al realizar un clic sobre el mismo por un tiempo determinado; como podrás ver en la imagen promocional, este botón está inspirado en el Material Design lo cual con CSS y un poco de JavaScript.

Para entender la idea primero debemos presentar el HTML del experimento:

<button id="botonTransformer" class="botonTransformer card">
	<span>Pegame un clic</span>
</button>

Cómo vemos en el HTML anterior tiene un detalle peculiar, y es que dentro de la definición del botón contiene un tag span el cual nos servirá para realizar la transformación al ocultar este span cuando sea necesario:

Botón Transformación estado 1

Al interactuar con el botón que en otras palabras significa aplicar un clic simplemente ocultamos el span en vez de todo el botón y aquí empleamos ya un truco bastante común en otras entradas como:

Y es el crear un contenedor extra con el selector after y/o before respectivamente:

.botonTransformer::after {
	content: " ";
	border: solid 4px rgb(204, 0, 0);
	border-right: solid 4px rgb(204, 0, 0);
	border-bottom: solid 4px rgb(204, 0, 0);
	border-left: solid 4px transparent;
	border-radius: 50px;
	position: absolute;
	top: 7px;
	right: 7px;
	bottom: 7px;
	left: 7px;
	margin: auto;
	width: 30px;
	height: 30px;
	opacity: 0;
	z-index: 1;
}
Botón Transformación estado 2

El botón con el span oculto.

Ahora mostramos el CSS del botón propiamente dicho y del span dentro del mismo:

.botonTransformer {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px auto 0px auto;
	border-radius: 5px;
}

.botonTransformer span {
	display: inline-block;
	min-width: 150px;
	padding: 10px 20px;
	z-index: 2;
}

Y este CSS es el empleado al presionar el clic sobre el botón:

.botonTransformer.Loading::after {
	animation: fadeIn .3s ease-in, spin 1.3s infinite ease-in-out;
	animation-fill-mode: forwards;
}

.botonTransformer.Loading {
	border-radius: 25px;
	max-width: 50px;
	max-height: 50px;
	cursor: default;
}

.botonTransformer.Loading span {
	opacity: 0;
}

Cómo podrás imaginar, el JavaScript simplemente captura el evento clic sobre el botón y aplica la clase Loading durante un tiempo determinado, que podría ser el tiempo de carga de algún método Ajax pero para nuestro experimento lo simulamos con un simple setTimeout:

var botonTransformer = document.getElementById('botonTransformer');

var transformer = function () {
	botonTransformer.classList.add('Loading')

	window.setTimeout(function () {
		botonTransformer.classList.remove('Loading')
	}, 3000)

}

botonTransformer.addEventListener('click', transformer)

Con esto obtenemos el siguiente resultado:

Ayúdanos a seguir creciendo

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Calendario de cubo

Calendario de cubo

Un waffle con CSS

Un waffle con CSS

6 Loaders con CSS

6 Loaders con CSS

Algunos artículos que te pueden interesar

La pseudo-class :empty en CSS

La pseudo-class :empty en CSS

En esta entrada veremos como funciona y cómo usar la poco usada y conocida pseudo-class :empty.

Andrés Cruz 15-12-2014

Múltiples fondos animados con CSS

Múltiples fondos animados con CSS

En este artículo explicaremos en base a un ejemplo cómo crear múltiples fondos anidados animándolos con un poco de CSS3.

Andrés Cruz 06-01-2014

Android basico: definición, eventos y uso de los botones (parte 1)

Android basico: definición, eventos y uso de los botones (parte 1)

En este artículo veremos cómo definir y utilizar mediante eventos un botón en Android.

Andrés Cruz 19-06-2014