Efeito Hover

Lição 7 de 8 do curso Projeto CSS - Botão Estilizado da Coddy.

Vamos criar algum efeito quando o mouse passar por cima do botão!

Para mudar o botão ao passar o mouse, usamos a pseudo-classe :hover,

.fancyButton:hover {
	background-color: red;
}

No exemplo acima, nosso botão ficará vermelho assim que o mouse passar por cima!

Para tornar a transição suave, use,

.fancyButton {
	...
	transition: all 0.2s;
}

Você pode experimentar com o tempo de transição (0.2s).

Desafio

Fácil

Adicione um efeito de hover ao seu botão, deixe-o bonito!

Tarefas obrigatórias:

Adicione a propriedade transition ao seu botão, com o tempo de sua escolha, menor ou igual a 1 segundo.
Adicione opacity: 0.8; ao efeito de hover do seu botão.

Propriedades opcionais e sugeridas para alterar no hover:

sombras (box-shadow)
cor de fundo

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
    </body>
</html>

Todas as lições de Projeto CSS - Botão Estilizado

1Introdução

Introdução Parte de HTML

2O Projeto CSS

Efeito Hover Lição de projeto

Estilização final