Efeito Hover em Botões
Parte da seção CSS Mastery do Journey de HTML da Coddy. Lição 41 de 43.
Desafio
FácilUm 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ção7Construa com CSS Grid
Fundamentos do GridPosicionamento de Itens com Grid-rowÁreas NomeadasDesafio de Revisão2Pseudo-classes Interativas
Pseudo-classesEfeitos de HoverEfeitos de FocoEstilos AtivosDesafio de Recapitulação3Pseudo-classes estruturais
Pseudo-classes estruturaisSelecionando o primeiro filhoSelecionando o último filhoO poder dos padrões: Usando nth-childDesafio de recapitulação6Landing Page
Estilizar a seção do cabeçalhoEstilizar o botãoLayout da seçãoLayout de cardAdicionar toques finais9Desafios Finais
Destacar Menu AtivoLinhas de Tabela ZebradasEfeito Hover em BotõesLayout de Cards em GridImagem Hero DesfocadaPratique por conta própria: Playground de Web