Menu
Coddy logo textTech
COMEÇAR A APRENDER
flag Pt iconPortuguêsdown icon

Efeito Hover em Botões

Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 41 de 43.

challenge icon

Desafio

Fácil

Um botão já está no HTML. Seu objetivo é fazê-lo aumentar levemente de tamanho quando o usuário passar o mouse sobre ele. No CSS, estilize o .cta-button para que:

  • Ele tenha uma transição suave transition: transform 0.3s ease;.
  • Ao passar o mouse (hover), ele aumente levemente de tamanho usando transform: scale(1.05).

Experimente você mesmo

<html>
<head>
  <title>Button Hover Effect</title>
  <style> 
    
    /* Add your styles here */
      .cta-button {
      background-color: #6a1b9a;
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
    }

  </style>
</head>
<body>
    <button class="cta-button">Click Me</button>
</body>
</html>

Todas as lições de CSS Mastery

1Domínio de Seletores – Combinação

IntroduçãoSeletor de DescendenteSeletor de FilhoSeletor de Irmão AdjacenteSeletor de Irmão GeralDesafio de Recapitulação

4Projeto de Menu Dropdown

Adicionar o submenuExibir o submenuMais estilizaçãoInput e botão

7Construa com CSS Grid

Fundamentos do GridPosicionamento de Itens com Grid-rowÁreas NomeadasDesafio de Revisão

2Pseudo-classes Interativas

Pseudo-classesEfeitos de HoverEfeitos de FocoEstilos AtivosDesafio de Recapitulação

5Efeitos visuais

GradientesFiltros CSSTransformaçõesTransições e Efeitos de HoverDesafio de Revisão

8Site Flavor Fiesta

Configurando o gridCabeçalhoA parte principalRodapé

3Pseudo-classes estruturais

Pseudo-classes estruturaisSelecionando o primeiro filhoSelecionando o último filhoO poder dos padrões: Usando nth-childDesafio de recapitulação

6Landing Page

Estilizar a seção do cabeçalhoEstilizar o botãoLayout da seçãoLayout de cardAdicionar toques finais

9Desafios Finais

Destacar Menu AtivoLinhas de Tabela ZebradasEfeito Hover em BotõesLayout de Cards em GridImagem Hero Desfocada