DMM Technology

Resumo/Informações

Definir elemento como inline-block:
É importante adicionar display: inline-block em elementos que queremos dar height e width, pois assim ele se comporta como um bloco, não deixando texto ficar em cima dele.
Examplos:
a) display: inline pode ficar em cima de algo.
b) display: inline-block não vai ficar em cima de algo, um texto irá pular o local onde esse elemento está.
c) display: block fica como uma div, pegando o espaço da linha inteira equivalente a seu tamanho.
Exemplos:

Definir as classes, transforms, transitions e outros styles do botão:
Importante: a transition fica sempre na classe principal.
a) btn:link, visited: adicionar os styles, incluindo o transition (para o clique do botão ser smooth).
b) btn:hover evento ocorre ao passar o mouse sobre botão, portanto pode colocar para o botão fazer uma animação, como ir para cima.
c) btn:active evento ocorre ao CLICAR no botão, portanto faz animação de quando clicar nele, geralmente ele descer e perder a shadow. Nesse caso, coloca 1px com translateY(1px) para ele descer, ou no caso dessa página que no hover ele vai subir -3px no Y (vai para cima, -3px para baixo), então coloca -1px aqui.
d) Box-Shadow: box-shadow: Ypx Xpx blurpx color;
Aplicar diferentes no :hover e :active, visto a sombra ser maior no :hover e menor no :active. Nesse caso: box-shadow: 0 5px 10px rgba(0,0,0, .2);

Pseudo-elements

Adicionar o efeito de explosão em :hover

Para isso, vamos utilizar o position absolute nas classes com psedo-elements, para eles se referenciarem na classe principal .btn, que irá estar com position: relative.

Explicação de position absolute e relative:
Uma classe que esteja com absolute, irá se referenciar na primeira classe acima dela que estiver com a position relative. Ou seja, se nenhuma classe acima dela estiver como relative, e você colocar na absolute top: 0 e left: 0, o conteúdo ficará grudado no ponto 7 do browser, pois o seu ponto de referência no caso de não houver nenhum, será o body. Já no caso de colocar algum elemento com absolute e também top: 0 e left:0, porém agora, acima dele temos a classe container que está com position relative. Isso significa que o conteúdo que está com a position absolute, irá grudar no ponto 7 do container e não do body, visto esse agora ser a classe referência mais próxima.
Adicionar o .btn como position: relative e .btn::after como absolute.
Adicionar no .btn:hover::after o transform: scale(number), é possível utilizar o scaleX() e scaleY();
Scale: utilizado para aumentar ou diminuir o tamanho de um elemento em vezes. ScaleX(2) = tamanhoElemento x2.
Nesse caso, vamos colocar o scale junto com o opacity: 0, para que ao hover no botão, a propriedade scale aumente ele em 1.4 vezes e a opacity faça com que ele aumente e vá ficando transparente até que suma, dando um efeito legal.

Applying the animation-fill-mode property.
Basicly tells the CSS what to do with any element that we are animating outside of the animation window, meaning, before it starts animating and after it finishes animating.
Sintax: animation-fill-mode: value value value value;
a) none (default): do nothing outside the animation window, once it's finished return the animation to it's original state (definido fora do keyframes).
b) forwards: pega o último elemento da animation e aplica ao elemento, para que então ele fique parado na última ação da animação.
c) backwards: whatever the starting animation is, I want you to apply that to the element before the animation kicks in.
d) both: applies backwards and fowards.
Nesse caso, vamos aplicar a propriedade animation-fill-mode: backwards. Because you have to apply the animation before the page loads, otherwise the button will apper before the animation starts, and then when animation starts, it will come from the bottom.