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:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Sistema sola con CSS

Sistema sola con CSS

Como dibujar con canvas y ciclos -HTML5

Como dibujar con canvas y ciclos -HTML5

Un waffle con CSS

Un waffle con CSS

Algunos artículos que te pueden interesar

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

¿Cómo hacer una simple galería responsive con CSS 2?

¿Cómo hacer una simple galería responsive con CSS 2?

En esta entrada veremos como hacer una simple galería responsive empleando un poco de CSS y nada más.

Andrés Cruz 13-11-2014

Creando un loader animado con solo CSS

Creando un loader animado con solo CSS

Se explica cómo crear un loader con solo CSS con una sencilla animación.

Andrés Cruz 12-09-2016