Menu de Redes Sociais com efeito balão em HTML e CSS

Nesse tutorial de HTML e CSS você vai aprender a criar um Menu de Redes Sociais muito estiloso com efeito hover, quando o usuário passa o mouse ele sobe uma balãozinho com o nome de rede social.

Assista o vídeo e aprenda.

O grande segredo para fazer esse tipo de feito é usar as propriedades CSS de opacidade e posição absoluta. 

Com a propriedade CSS display:absolute; nós podemos manipular a posição do elemento alvo com base na posição do elemento pai sem afetar a posição dos demais elementos. É claro que não podemos esquecer de aplicar um position:relative no elemento pai que no caso é um botão criado com elemento HTML de link <a>

Assim modificando as propriedade de posicionamento left, top, right e bottom no evento hover, ou seja quando o usuário passar o mouse podemos obter esse tipo de efeito e ainda podemos usar a propriedade CSS opacity para deixa o efeito ainda mais interessante.