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

Efeito CSS para botões: expansão sutil com scale() no hover

📝 Uso

Este template é usado quando você deseja dar um efeito de aumento leve a um botão quando o mouse passa sobre ele.

📘 Explicação

Este código usa transform: scale() para alcançar o efeito de aumentar ligeiramente o botão quando o mouse passa sobre ele. A propriedade transition garante uma transformação suave.

🔹 Código Parcial

<style>
  .hover-scale-btn {
    background-color: #4CAF50;
    color: white;
    padding: 12px 24px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .hover-scale-btn:hover {
    transform: scale(1.1); /* Aumento leve ao passar o mouse */
  }
</style>

💻 Código Completo

<button class="hover-scale-btn">
  Botão que aumenta ligeiramente ao passar o mouse
</button>

<style>
  .hover-scale-btn {
    background-color: #4CAF50;
    color: white;
    padding: 12px 24px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .hover-scale-btn:hover {
    transform: scale(1.1); /* Aumento leve ao passar o mouse */
  }
</style>
Copiado!

✨ Técnicas Avançadas de Efeito de Ampliação

O efeito de ampliação ao passar o mouse pode ser aplicado não apenas a botões, mas também a vários outros elementos. Ajustando o valor de transform: scale(), é possível criar desde ampliações sutis como scale(1.05) até efeitos mais ousados como scale(1.5).

⏱ Ajuste de Transição

Para alterar a velocidade da animação, ajuste a propriedade transition. Por exemplo, transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); proporciona um movimento mais dinâmico. A função cubic-bezier permite criar curvas de aceleração personalizadas.

🎯 Efeitos Combinados

Combinar o efeito de ampliação com outros efeitos permite criar interações mais ricas. Por exemplo, transform: scale(1.1) rotate(5deg); adiciona uma leve inclinação junto com a ampliação. Para adicionar mudança de cor de fundo, use múltiplas propriedades como transition: transform 0.3s ease, background-color 0.3s ease;.

Vale lembrar que ampliações muito grandes (como scale(1.5) ou mais) podem sobrepor elementos próximos ou quebrar o layout. A propriedade transform mantém o espaço original do elemento, sendo ideal para animações que não interferem no fluxo de layout ao redor.

Essa técnica pode ser aplicada a elementos interativos como miniaturas em interfaces estilo cartão, itens de menu de navegação e listas de produtos. Adicionar movimentos sutis melhora a experiência geral do usuário no site.

Modelos Relacionados