DesarrolloLibre

Desarrollo Web, Android, juegos 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:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Atomo con CSS

Atomo con CSS

Botón flotante

Botón flotante

Rainbow tiles con solo CSS

Rainbow tiles con solo CSS

Algunos artículos que te pueden interesar

El uso de la función step en las animaciones y transiciones en CSS

El uso de la función step en las animaciones y transiciones en CSS

La función steps() permite controlar el movimiento de las animaciones indicando el número de "frame" o saltos que queremos que conste una animación o transición.

Andrés Cruz 16-03-2015

Animando letras con animation-delay en CSS

Animando letras con animation-delay en CSS

Se explica cómo crear una sencilla animación de letras empleando la propiedad animation-delay en CSS.

Andrés Cruz 18-08-2016

Transformando un botón de un estado a otro con CSS

Transformando un botón de un estado a otro con CSS

Se explica cómo transformar un botón con CSS y JavaScript.

Andrés Cruz 02-08-2016