Ads

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:

botao com efeito hover css

Animações com CSS usando transition

Para criar um efeito de transição, é necessário especificar duas coisas:

  1. A propriedade CSS que você deseja adicionar o efeito
  2. 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;

botao com efeito de transicao css

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.

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;
}
css para acrescentar texto no botao

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://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <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:

Ads