Transição de preenchimento com CSS

Oie pessoal, tudo bem com vocês? Nesse artigo vamos ver como fazer uma animação de preenchimento em um botão, utilizando transições com CSS3. Bora aprender?

Eu vou utilizar o CodePen como nosso editor de código, pois ele é online e muito simples de utilizar, inclusive podemos ver as atualizações em tempo real! Você pode acessá-lo aqui.

No nosso HTML, vamos criar a tag body e dentro dela colocaremos o botão (button) com uma classe chamada 'btn'. Só isso!

Agora vamos partir pra nossa estilização!

Vou adicionar uma cor de fundo no nosso corpo da página! Essa cor é bem similar ao preto (quem não gosta de um Dark Mode né hahahah).

Vou estilizar o botão para ficar diferente do padrão. Utilizei a classe pois é mais específico do que utilizar apenas o "button" no geral.

Antes da estilização:

Depois da estilização:

Bem melhor, né? Então bora explicar o que aconteceu aqui!

🐻‍❄️ Padding = adicionei um espaçamento interno de 1rem na vertical e 2rem nas laterais. "rem" é uma unidade de medida considerada responsiva.

🦁 Border-radius = bordas arredondadas.

🐶 Background: transparent = adicionei um fundo transparente ao botão.

🐱 Border: adicionei uma borda de 2px com uma cor meio avermelhada.

🐷 Font-size: aumentei o tamanho da fonte para 1.2rem.

🐸 Color: white = troquei a cor do texto para branco.

🐵 Cursor: pointer = deixamos o cursor do mouse com a mãozinha, para aparecer clicável.

🐧 Position: relative = adicionamos essa propriedade pois utilizamos o position: absolute no pseudo-elemento before (que veremos a seguir). E lembrando que todo position absolute precisa ter um pai relativo! 

ps: tenho um vídeo lá no meu canal do YouTube falando sobre position. ❤️

Agora vamos para o pseudo elemento ::before. O before (significa antes) vai adicionar um conteúdo antes do elemento. A ideia aqui é fazer com que o before adicione uma "caixa" da cor avermelhada em cima do nosso botão, para depois conseguirmos animar ela. Olha só:

🐻‍❄️ Content: '' = é obrigatório ter um content quando se utiliza ::before ou ::after. Como nós vamos manipular o conteúdo, deixamos ele vazio.

🦁 Position: absolute = ele precisa ser posicionado de forma absoluta em relação ao nosso botão (que é relativo).

🐶 background: #F4796B; = é a cor do nosso preenchimento.

🐱 width: 100%; height: 100% = adicionamos 100%  para que tenha a largura e altura total do botão.

Resultado:

Não ficou muito legal né? Ainda precisamos posicioná-lo de maneira com que encaixe no nosso botão. Para isso, adicionamos o top: 0 (topo) e left: 0 (esquerda), essas são propriedades acompanhadas do position!

Agora sim posicionamos de maneira correta! Mas para finalizar, vamos adicionar um z-index: -1 (eixo Z) para a caixa não sobrepor o nosso texto! E ah, vamos colocar também uma transição para o preenchimento ser feito de maneira suave:

Bom, o nosso objetivo é fazer com que a caixa avermelhada apareça apenas quando colocamos o mouse em cima disso! Por isso, vamos alterar a nossa width, e colocar como 0, para então, no efeito do mouse por cima (hover), ela ser 100%. Deu pra entender a lógica?

E por fim, no nosso efeito hover:

E proooonto! Finalizamos a nossa animação. E aí, curtiram? 💜