Ejemplo para hacer un botón animado en CSS

Los botones animados son una excelente manera de mejorar la experiencia del usuario en un sitio web. Una pequeña animación en un botón puede hacer que una página se sienta más interactiva y moderna. En este artículo, aprenderás a crear un botón animado utilizando solo CSS, sin necesidad de JavaScript.

Paso 1: Estructura HTML del botón

Comenzaremos con un código HTML básico. Solo necesitamos un botón dentro de un contenedor, al que luego daremos estilo con CSS.

html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Botón Animado en CSS</title>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>

<div class="contenedor">
  <button class="boton-animado">Haz clic aquí</button>
</div>

</body>
</html>

Paso 2: Estilos básicos con CSS

Vamos a definir algunos estilos básicos para el contenedor y el botón. Empezamos con un estilo sencillo para el botón, que incluye color de fondo, tamaño, y bordes redondeados.

css
/* estilos.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f9;
}

.contenedor {
  text-align: center;
}

.boton-animado {
  padding: 15px 30px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background-color: #3498db;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

Aquí hemos creado una transición en el botón para que cualquier cambio de color o transformación se aplique suavemente, lo que es ideal para nuestras animaciones.

Paso 3: Añadir el efecto `hover`

A continuación, añadiremos el efecto hover para que el botón cambie de color y tenga una ligera animación cuando el usuario pase el ratón sobre él.

css
.boton-animado:hover {
  background-color: #2980b9; /* Cambia a un color más oscuro */
  transform: scale(1.05); /* Aumenta el tamaño ligeramente */
}

Con el estilo :hover, el botón cambiará de color y se agrandará un poco, dando una sensación de "rebote" al usuario.

Paso 4: Agregar un efecto de "sombra creciente"

Para hacer el botón aún más atractivo, añadiremos un efecto de sombra que aparezca gradualmente cuando el usuario coloque el ratón sobre él. Esto dará profundidad al botón y hará que parezca que se está "levantando" de la página.

css
.boton-animado:hover {
  background-color: #2980b9;
  transform: scale(1.05);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

Este box-shadow crea una sombra que aparece alrededor del botón, haciendo que parezca elevado. Hemos especificado el box-shadow solo en el efecto hover para que la animación sea visible solo cuando el usuario interactúe con el botón.

Paso 5: Crear una animación de "clic"

Finalmente, vamos a añadir un efecto para cuando el usuario haga clic en el botón. Este efecto de "presión" hace que el botón parezca que se hunde ligeramente antes de volver a su tamaño original.

css
.boton-animado:active {
  transform: scale(0.98);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Al aplicar un transform: scale(0.98) en el estado :active, reducimos ligeramente el tamaño del botón cuando es presionado, simulando un efecto de presión.

Código CSS completo

Aquí tienes el código CSS completo para el botón animado:

css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f9;
}

.contenedor {
  text-align: center;
}

.boton-animado {
  padding: 15px 30px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background-color: #3498db;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.boton-animado:hover {
  background-color: #2980b9;
  transform: scale(1.05);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.boton-animado:active {
  transform: scale(0.98);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Resultado final

Ahora, si pruebas el código en tu navegador, verás que el botón:

Cambia de color y se agranda ligeramente al pasar el ratón sobre él.
Muestra una sombra que le da un efecto de elevación.
Simula un efecto de presión cuando se hace clic en él.

Buscar este blog

Vía Electrónica