DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
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

Hover over the cards

Hover over the cards

Efectos hover con CSS

Efectos hover con CSS

Flat Module con puro CSS

Flat Module con puro CSS

Algunos artículos que te pueden interesar

Las curvas de béziers en las animaciones CSS: caso Google Chrome

Las curvas de béziers en las animaciones CSS: caso Google Chrome

Los loaders son un recurso de los más vistosos y necesarios en cualquier aplicación al momento de realizar una tarea que requiera tiempo; en esta entrada veremos cómo crear un par de loaders.

Andrés Cruz 15-10-2015

Cómo crear una tabla con resaltado en columnas y filas (vertical y horizontal)

Cómo crear una tabla con resaltado en columnas y filas (vertical y horizontal)

En esta entrada veremos cómo crear una tabla sencilla con resaltados (highlight) sobre las celdas seleccionadas horizontal y verticalmente (columnas y filas).

Andrés Cruz 05-05-2016

Cómo crear nuestro propio botón tipo hamburguesa animado con CSS y un par de divs

Cómo crear nuestro propio botón tipo hamburguesa animado con CSS y un par de divs

Se explica cómo crear un botones de tipo hamburguesa animado con CSS, HTML y una simple función de JavaScript, los botones se convierten una vez clickeados en flechas y/o X según sea el caso.

Andrés Cruz 09-08-2017