9. Tutorial - Menu Haru

Pra quebrar a onda de utilitários, quis postar um tuto bem legal de um menuzinho criado por mim. Se foi criado por mim, obviamente,quero os devidos créditos. Plágio é crime.

Esse menu tem um efeito bem legal, que "espalha" a borda quando você passa o mouse. O nome dele é Menu Haru. Vamos lá????

1. Bem, vá no seu HTML e procure por [[></b:skin>. Antes dessa tag cole:

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
a.haru {
background: #9013ef;
color: #d6b1f2;
Border-top: 1px solid #d6b1f2
Border-bottom: 1px solid #d6b1f2
width: 20%;
float: left;
-webkit-transition-duration: .90s;
font-size: 08px;
font-family:  silkscreen;
}
a.haru:hover {
background: #9013ef;
color: #d6b1f2;
Border-top: 9px solid #d6b1f2
Border-bottom: 9px solid #d6b1f2
width: 20%;
float: left;
-webkit-transition-duration: .90s;
font-size: 08px;
font-family:  silkscreen;

2. Isso feito, cole esse código num gadget HTML/JavaScript:

<a class="haru" href="SEULINK">Nome do link</a>

Pronto! Se tiver alguma dúvida, só comentar ou falar pela ask!