Dê Vida à Interface

Estados de hover dizem ao usuário "isso é interativo." Um botão que muda ao passar o mouse convida ao clique. Um card que se eleva sugere que leva a algum lugar. Essas micro-interações fazem as aplicações parecerem responsivas e profissionais.

O Que Você Vai Aprender

Criar estados de hover eficazes
Usar transições para efeitos suaves
Aplicar transforms para profundidade visual
Gerenciar estados de foco para acessibilidade

O Básico do Hover

A pseudo-classe :hover aplica estilos quando o cursor está sobre um elemento:

.card {
  background: white;
  border: 1px solid #e5e7eb;
}

.card:hover {
  border-color: #3b82f6;
}

Mas mudanças abruptas parecem bruscas. Adicione transições:

.card {
  background: white;
  border: 1px solid #e5e7eb;
  transition: border-color 0.2s ease;
}

.card:hover {
  border-color: #3b82f6;
}

Agora a cor da borda muda suavemente em 0,2 segundos.

Propriedades de Transição

Controle o que é animado e como:

/* Specific property */
transition: background-color 0.2s ease;

/* Multiple properties */
transition: background-color 0.2s ease, transform 0.2s ease;

/* All properties (use carefully) */
transition: all 0.2s ease;

/* Different timing for different properties */
transition: 
  background-color 0.15s ease,
  transform 0.3s ease-out,
  box-shadow 0.2s ease;

Funções de temporização comuns:

ease — Começa devagar, acelera, desacelera
ease-in — Começa devagar
ease-out — Termina devagar
ease-in-out — Início e fim lentos
linear — Velocidade constante

Estados de Hover em Botões

Faça os botões parecerem clicáveis:

.btn {
  padding: 0.75rem 1.5rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn:hover {
  background: #2563eb;
}

.btn:active {
  transform: scale(0.98);
}

O estado :active dá feedback durante o clique — uma escala sutil cria um efeito de "pressão".

Efeitos de Hover em Cards

Eleve os cards para sugerir que são clicáveis:

.service-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  transition: 
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.service-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

O card se eleva (translateY), ganha profundidade de sombra e destaca sua borda.

Efeitos de Hover em Imagens

Aplique zoom em imagens ao passar o mouse para criar interesse visual:

.card-image {
  overflow: hidden;
  border-radius: 8px;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card:hover .card-image img {
  transform: scale(1.05);
}

Observação: O hover está no elemento pai .card, mas o efeito está na img aninhada. Isso cria uma experiência mais acessível.

Estados de Hover em Links

Torne os links claramente interativos:

.nav-link {
  color: #4b5563;
  text-decoration: none;
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.15s ease;
}

.nav-link:hover {
  color: #3b82f6;
}

/* Animated underline */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #3b82f6;
  transition: width 0.2s ease;
}

.nav-link:hover::after {
  width: 100%;
}

O sublinhado desliza da esquerda ao passar o mouse.

Estados de Foco para Acessibilidade

Não se esqueça dos usuários de teclado. Os estados de foco devem ser visíveis:

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

/* Modern approach: visible only for keyboard */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

:focus-visible é exibido apenas para navegação por teclado, não para cliques do mouse. Isso mantém a interface limpa e preserva a acessibilidade.

Aplicar aos Componentes do BookIt

Hover no ServiceCard

<!-- filename: src/lib/components/ServiceCard.svelte -->
<style>
  .card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: 
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }
  
  .card:hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
  
  .card-image img {
    transition: transform 0.3s ease;
  }
  
  .card:hover .card-image img {
    transform: scale(1.05);
  }
  
  .card-title a {
    color: #1f2937;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  
  .card-title a:hover {
    color: #3b82f6;
  }
</style>

Hover na Navegação

<!-- filename: src/lib/components/Header.svelte -->
<style>
  nav a {
    color: #4b5563;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  
  nav a:hover {
    background: #f3f4f6;
    color: #1f2937;
  }
  
  nav a.active {
    background: #eff6ff;
    color: #3b82f6;
  }
</style>

Hover no Badge de Preço

<!-- filename: src/lib/components/PriceBadge.svelte -->
<style>
  .price {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #eff6ff;
    color: #3b82f6;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.15s ease;
  }
  
  .price:hover {
    background: #dbeafe;
  }
</style>

Diretrizes para Estados de Hover

Faça:

Use efeitos sutis (não exagere)
Mantenha as transições curtas (0,15s - 0,3s)
Combine o hover com o propósito do elemento
Inclua estados de foco para acessibilidade

Não faça:

Tornar os efeitos de hover muito dramáticos
Esquecer de usar transições (mudanças abruptas parecem quebradas)
Usar hover para informações essenciais (dispositivos touch não têm hover)
Remover contornos de foco sem alternativas

Considerações para Dispositivos Touch

Hover não existe em dispositivos touch. Não dependa dele para interações essenciais:

/* This info is only visible on hover — bad! */
.card .details {
  opacity: 0;
}
.card:hover .details {
  opacity: 1;
}

Melhor: Exiba a informação por padrão, ou use um toque/clique para revelar.

Para efeitos puramente decorativos, o hover é adequado — eles simplesmente não aparecerão em dispositivos touch.

Erros Comuns

Movimento Excessivo

/* ❌ Too dramatic */
.card:hover {
  transform: scale(1.2) rotate(5deg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* ✅ Subtle and professional */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

Transições Ausentes

/* ❌ Abrupt change */
.btn:hover {
  background: #2563eb;
}

/* ✅ Smooth transition */
.btn {
  transition: background-color 0.15s ease;
}
.btn:hover {
  background: #2563eb;
}

Esquecendo Usuários de Teclado

/* ❌ Only hover, no focus */
.btn:hover {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

/* ✅ Both hover and focus */
.btn:hover,
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

Resumo

Estados de hover fazem as interfaces parecerem responsivas. Use transições para efeitos suaves, mantenha os movimentos sutis e sempre inclua estados de foco para acessibilidade. O objetivo é fornecer feedback, não distrair.

Principais conclusões:

Adicione transition antes dos estilos :hover
Mantenha os efeitos sutis (0,15s–0,3s, transformações pequenas)
Inclua :focus-visible para usuários de teclado
Não esconda informações essenciais por trás do hover

Próximos Passos

Os estilos de componentes têm escopo definido, mas alguns estilos precisam ser globais. Continue com Estilos Globais para configurar tipografia, cores e estilos base para todo o BookIt.