Ejercicio CSS 5

🎨 Ejercicio 5: Botón con efecto hover animado

📌 Planteamiento:

Diseña un **botón con un efecto animado al pasar el mouse** usando CSS:

• ✅ El botón debe tener un color de fondo azul y texto blanco.
• ✅ Al pasar el mouse, debe **cambiar de color suavemente**.
• ✅ Usa la propiedad transition para la animación.
• ✅ Aplica bordes redondeados y un poco de sombra.

👉 Escribe el **CSS necesario** para estilizar un botón simple (<button>).

✅ Modelo de solución CSS:

button {
  background-color: #007BFF;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}
    

🎯 Claves de este ejercicio:

• 📍 Cómo usar transition para lograr efectos suaves.
• 📍 Importancia de la propiedad hover en botones interactivos.
• 📍 Creación de botones modernos con bordes redondeados y sombras.