Tutorial: anima un botón con transiciones CSS

Los botones que no reaccionan a nada se sienten muertos. Con un par de líneas de CSS vas a hacer que el tuyo se sienta vivo (sin necesidad de JavaScript, sorpresa).

Paso 1: el botón base

<button class="boton">Haz clic aquí</button>

.boton {
  background-color: #00e5bf;
  color: #0b1620;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-weight: bold;
  cursor: pointer;
}

Paso 2: agrega una transición suave

.boton {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.boton:hover {
  background-color: #20c9ac;
  transform: translateY(-2px);
}

transition le dice al navegador "cuando cambie esta propiedad, anímalo suavemente en vez de saltar de golpe". :hover define qué pasa cuando el mouse está encima. El resultado: un botón que "flota" levemente al pasar el cursor.

Paso 3: agrega efecto al hacer clic

.boton:active {
  transform: translateY(0) scale(0.97);
}

:active se activa mientras mantienes presionado el botón. Ese pequeño encogimiento simula que el botón realmente se "hunde" al presionarlo, como un botón físico. Detalles así son los que hacen que una interfaz se sienta pulida en vez de genérica.

¿Qué acabas de aprender?

• Cómo usar transition para animar cambios de propiedad.
• Cómo usar :hover y :active para reaccionar a la interacción del usuario.
• Que puedes lograr mucha "interactividad" sin escribir JavaScript.