Cómo crear un efecto al hacer clic en un botón utilizando CSS y JavaScript

Para el diseño avanzado de sitios web y aplicaciones, a menudo se utilizan efectos adicionales cuando se hace clic en un botón. Veamos cómo implementar esto utilizando CSS y JavaScript básico.

Ejemplo

Ejemplo práctico de un botón:

Desafortunadamente, no se puede hacer solo con CSS, por lo que tendrás que usar JavaScript. Para aquellos que aún no estén familiarizados con él, esta es una excelente razón para empezar. Daré comentarios exhaustivos sobre cómo funciona el script. Es pequeño y sencillo, pero sé por experiencia propia lo intimidante que es esta «magia» hasta que se le coge el truco.

Cómo funciona

El principio general del efecto es el siguiente:

• al cargar la página, añade un controlador para el evento de hacer clic en uno o varios botones;
• al hacer clic, añade una clase determinada al botón, que tiene una animación de clic;
• elimina la clase después de N tiempo, para que el efecto funcione en el siguiente clic.

Veámoslo con un ejemplo concreto.

Creación

Primero, crea un esquema sencillo de la página con el botón:

<div class="main"> <div class="button">BUTTON</div> </div>

Ahora vamos a establecer los estilos básicos para la página y el botón (son opcionales, es solo para que el ejemplo quede más bonito).

/* Eliminar sangrados predeterminados */ body, html { margin: 0; padding: 0; } .main { /* Establecer la altura y los estilos del bloque común */ height: 400px; background-color: #f5f5f5; /* Centrar el botón */ display: flex; justify-content: center; align-items: center; } .button { background-color: #000; color: #fff; padding: .75em 1.5em; cursor: pointer; transition: box-shadow 200ms linear; } .button:hover { box-shadow: 0 .5em 1em 0 rgba(0, 0, 0, 0.15), 0 .4em .5em -.4em rgba(0, 0, 0, 0.4); }

Y aquí está el CSS obligatorio: el efecto del clic en sí mismo.

.button { position: relative; } .button:after { content: ''; position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -40px; width: 80px; height: 80px; border-radius: 50%; opacity: 0; box-shadow: inset 0 0 0 35px rgba(0,0,0,0.1); display: none; } .button.click:after { animation: animate-click 0.6s ease-out forwards; display: block; } @keyframes animate-click { 0% { opacity: 1; transform: scale3d(0.4, 0.4, 1); } 80% { box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); opacity: 0.1; } 100% { opacity: 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); transform: scale3d(1.2, 1.2, 1); } }

Veamos cómo funciona. Primero, añade un bloque de efecto después del botón, establece su tamaño y posición. Por defecto, el bloque está oculto. Tiene una sombra interna que ocupa casi todo el bloque.

A continuación, describimos la animación, si el botón tiene la clase .click añadida. Normalmente, la animación se añade, por ejemplo, al pasar el cursor por encima de un elemento, pero en nuestro ejemplo la clase se añadirá al bloque mediante el script. Y la animación se activará cada vez que el botón tenga este .click. Sin el script, esta animación se activará simplemente cuando se cargue la página.

Escribamos la animación en sí. En primer lugar, el bloque se reduce al 40 % de su tamaño mediante la propiedad transform: scale3d(0.4, 0.4, 1);. A continuación, se produce una disminución gradual de la transparencia y una reducción de la sombra interna, es decir, se encoge desde el centro hacia los bordes, lo que visualmente parece un aumento del bloque. Al mismo tiempo, el bloque aumenta, volviéndose transparente, y se añade el efecto de desaparición ondulada de la sombra, como si estuviera alcanzando al bloque en expansión.

Puedes cambiar el color, el tiempo de animación, el tamaño inicial del bloque, el tamaño en la compresión y el aumento para conseguir el efecto deseado. Ahora solo queda añadir el código JS.

// Después de cargar la estructura del documento document.addEventListener("DOMContentLoaded", () => { // Definir el bloque de botones const button = document.querySelector('.button'); // Configure el receptor de eventos haciendo clic en el botón button.addEventListener("click", (event) => { // Definir el elemento pulsado const elem = event.target; elem.classList.add('click'); // Añade una clase .click al bloque setTimeout(function() { elem.classList.remove('click'); // Borrar la clase .click después de 400ms }, 400); }); });

Eso es todo, ahora tenemos botones con efecto de clic. Si te ha gustado el artículo, puedes compartirlo en las redes sociales y marcarlo como favorito para consultarlo cuando lo necesites. Gracias por leer :)