Tutorial - Menu Simples com Gif

Olá ~3~

Tudo  bem? Eu estava fazendo uns goodies, mas não sabia o que querem! Então trouxe um tutorial  de menu simples com gif! Acho que fica muito bem em um menu, ou social, tipo ask, tumblr, we S2 it, Facebook,  e etc!

Enfim, já usei e  ele funciona, se algo der  errado é  o seu código ou coisa assim, porém acho ele  super fácil, tirei um print para vocês verem! 

Vamos Lá?

1. Vá até editar HTML e procure pela tag ]]></b:skin> e acima dela, cole:

 @font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}

.fantastic {

display : block;

font-size: 8px;

font-family: handy;

text-transform: uppercase;

line-height: 16px;

margin-top: 2px;

border-bottom : 1px solid #ebeaea;  

border-right : 1px solid #f1f1f1; 

border-left : 1px solid #f1f1f1;

text-indent : 5px; 

vertical-align : middle;  

background:  no-repeat left #f3f3f3; 

padding-left : 6px;

padding-bottom : 2px;

}

.fantastic:hover {

display : block; 

background: url('http://media.tumblr.com/tumblr_m0ohnsdlwO1qfjy56.gif') no-repeat left #f9f9f9;

}

NTodos os códigos já são bem conhecidos. Naquela url ali é o link do seu gif, sendo o ícone verde, pode mudar para um coração ou o que preferir! Os códigos de cores #f1f1f1 referem-se a borda e #f3f3f3 refere-se ao fundo. O resto vocês sabem sozinhos, mas não recomendo que mudem,  assim está ótimo!

2. Em um gadget de HTML/JavaScript, cole o seguinte:

<div class="fantastic"> seu texto </div>

Salve e estará tudo nos conformes. Espero que tenha entendido e gostado do tutorial, dúvidas, comente ^.^

Créditos X