HOVER é um seletor CSS usado para selecionar elementos quando você passa o mouse sobre eles. Para entendermos melhor, veja o exemplo a seguir;
Efeito Simples de Hover em Um Botão
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
button:hover {
background-color: blue;
color:white;
}
</style>
</head>
<body>
<button>Clique-me</button>
</body>
</html>
O exemplo acima faz com que todos os elementos buttons tenham o efeito mostrado no GIF abaixo:
Animações Com CSS Usando Transition
Para criar um efeito de transição, é necessário especificar duas coisas:
- A propriedade CSS que você deseja adicionar o efeito
- A duração do efeito.
Um exemplo bem simples é acrescentar a seguinte linha dentro do bloco style da nossa página transition: all 0.5s ease-in; . O resultado será este;
No exemplo acima, note que o seletor transition possui um atributo denominado ease-in. Existem 6 variações destes efeitos, sendos eles;
ease – especifica um efeito de transição com um arranque lento, em seguida, rapidamente, em seguida, termina-se lentamente (isto é o padrão)
linear – especifica um efeito de transição com a mesma velocidade do início ao fim
ease-in – especifica um efeito de transição com um arranque lento
ease-out – especifica um efeito de transição com uma extremidade lento
ease-in-out – especifica um efeito de transição com um lento início e fim
cubic-bezier(n,n,n,n) – permite definir seus próprios valores em uma função cúbica-bezier
Agora você pode brincar com os seus CSS testando estes outros atributos de animação.
Criando um atraso na animação
Outro recurso bem legal é criar um atraso na animação usando o seletor transition-delay. Acrescente a seguinte linha no bloco style transition-delay: 0.2s; e veja o resultado;
Aumentar o tamanho do botão quando passar o mouse (zoom)
Outro efeito bem legal é aumentar o tamanho do botão, isso pode ser feito usando a regra transform: scale(); veja um exemplo;
button:hover {
transform: scale(1.1);
transition: all 0.5s;
} Resultado;
Acrescentando um ícone na animação
Agora vamos criar um efeito no qual, ao passar o mouse, aparecerá um ícone logo após o texto de clique-me. Para isso usamos o atributo content quer permite acrescentar um novo conteúdo de texto ao elemento e no nosso caso, queremos adicionar um ícone ao texto do botão. Porém, este atributo depende de dois seletores, o before e o after que indicam se o texto deve aparecer antes ou depois do texto.
Outro detalhe importante é que o ícone deverá aparecer somente quando passar o mouse sobre o botão (hover), então devemos combinar o seletor hover com o after ou before. A linha de código ficará assim;
button:hover:after {
content:" texto extra";
font-size:20px;
}
Resultado:
Como usar o FontAwesome junto com CSS
Agora vamos acrescentar o ícone. Vamos usar a biblioteca do Font Awesome. No bloco da sua página acrescente o endereço CDN do FA.
Aqui teremos um pequeno problema para resolver, o atributo content aceita apenas texto, ele não aceita tags html portanto não será possível utilizar os códigos do FA, conforme imagem;
Para resolver isso, não iremos usar o código mostrado na imagem acima, vamos usar o código que está ao lado:
O Font Awesome é uma fonte comum, assim como a Times New Roman, ou Arial, portanto, devemos chamar a fonte para dentro do seletor after
button:hover:after {
font-family:"Font Awesome 5 Free";
content: " \f058";
font-size:20px;
}
O resultado ficará assim;
Exemplo completo
Agora que você entendeu como criar estas pequenas animações, é hora de deixara a animaçaõ fluir. O código completo ficou assim;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
@import url('https://fonts.googleapis.com/css?family=Gaegu');
button {
font-family: 'Gaegu', cursive;
font-size: 26px;
border: 2px solid #333333;
border-radius: 15px;
box-shadow: none;
border-radius: 0px;
height: 40px;
width: 300px;
}
button:hover {
background-color: #333333;
border: 2px solid #000;
color: white;
transition: all 0.5s ease-in;
transition-delay: 0.05s;
}
button:hover:after {
content: "f217";
font-family: "FontAwesome";
font-style: normal;
font-variant-caps: normal;
font-variant-ligatures: normal;
text-rendering: auto;
}
</style>
</head>
<body>
<button>Adicionar ao carrinho</button>
</body>
</html>
Resultado:
