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

Modelo CSS: Botão que muda de cor ao passar o mouse (:hover)

📝 Uso previsto

Este modelo é útil quando você deseja oferecer um feedback visual ao usuário mudando a cor do botão ao passar o mouse. É uma técnica comum para melhorar a experiência do usuário.

📘 Explicação

Utilizamos a pseudoclasse :hover para alterar a background-color quando o cursor está sobre o botão. A propriedade transition cria um efeito suave.

🔹 Código parcial

<button class="hover-button">Passe o mouse</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="pt">
<head>
  <meta charset="UTF-8">
  <title>Botão que muda de cor ao passar o mouse</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">Passe o mouse</button>
</body>
</html>
Copiado!

🎨 Técnicas práticas de design para efeitos hover

O efeito hover em botões é um elemento importante da interface do usuário que comunica visualmente a interação. A pseudoclasse :hover permite indicar intuitivamente que o elemento é clicável.

🌈 Variações de design de cores

Além do azul padrão (#007bff → #0056b3), é recomendável ajustar as cores de acordo com a paleta do site. Por exemplo, para tons de verde use #28a745 → #218838, e para tons de vermelho #dc3545 → #c82333. Manter uma taxa de contraste de pelo menos 4.5:1 também melhora a acessibilidade.

✨ Aprimorando a interatividade

Adicionar transition: all 0.3s ease proporciona uma transição suave não só na cor, mas também no tamanho e sombra. Com transform: scale(1.05), o botão aumenta levemente, tornando-o mais interativo. No entanto, evite animações exageradas; mudanças em até 0.3 segundos são ideais.

📱 Considerações para design responsivo

Em dispositivos móveis, combine :hover com :active para melhor resultado. Aumentar o padding (12px 24px) melhora a área de toque. Para modo escuro, use @media (prefers-color-scheme: dark) e defina cores apropriadas.

Os efeitos hover melhoram a experiência do usuário, mas devem ser aplicados de forma consistente em todo o site. Limite o uso a botões importantes e evite decorações excessivas.

Modelos Relacionados