🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

Plantilla CSS: Botón que cambia de color al pasar el cursor (:hover)

📝 Uso previsto

Esta plantilla es útil cuando deseas proporcionar retroalimentación visual cambiando el color del botón al pasar el cursor. Es una técnica común para mejorar la experiencia del usuario.

📘 Explicación

Se utiliza la pseudoclase :hover para cambiar el background-color cuando el usuario pasa el cursor sobre el botón. La propiedad transition agrega un efecto suave.

🔹 Código parcial

<button class="hover-button">Pasa el cursor</button>

<style>
  .hover-button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .hover-button:hover {
    background-color: #0056b3;
  }
</style>

🔸 Código HTML completo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Botón con cambio de color al pasar el cursor</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .hover-button {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .hover-button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <button class="hover-button">Pasa el cursor</button>
</body>
</html>
¡Copiado!

🎨 Técnicas prácticas de diseño para efectos hover

Los efectos hover en los botones son elementos clave de la interfaz de usuario que transmiten visualmente la interacción del usuario. Usar la pseudoclase :hover para cambiar colores indica de forma intuitiva que un elemento es interactivo.

🌈 Variaciones en el diseño de color

Aunque el azul por defecto (#007bff → #0056b3) es común, es recomendable ajustarlo para que coincida con la paleta de colores de tu sitio. Por ejemplo, los botones verdes pueden ir de #28a745 a #218838, y los rojos de #dc3545 a #c82333. Mantener una relación de contraste de al menos 4.5:1 mejora la accesibilidad.

✨ Interactividad avanzada

Agregar transition: all 0.3s ease permite cambios suaves no solo en el color, sino también en el tamaño y las sombras. Aplicar transform: scale(1.05) hace que el botón se vea un poco más grande, aumentando su interactividad. Sin embargo, evita animaciones excesivas; los cambios en menos de 0.3 segundos son ideales.

📱 Consejos para diseño responsive

En dispositivos táctiles, es mejor combinar :hover con :active. En móviles, aumentar ligeramente el padding (12px 24px) mejora la zona de toque. Utiliza @media (prefers-color-scheme: dark) para establecer colores adecuados en modo oscuro.

Los efectos hover mejoran la experiencia del usuario, pero deben aplicarse con coherencia en todo el sitio. Úsalos solo en botones de acción importantes y evita decoraciones excesivas.

Plantillas Relacionadas