Tutorial: Menu Border Along

 

Yo ^-^ ~

Bem, aqui estou eu denovo. Agora vim trazer um menu saindo do forno que eu mesma fiz, ele é bem simples mas ficou super fofo!

Ele é todo feito apenas de CSS, é bem simples de editar, mas requer atenção. O efeito é assim: Ele tem uma bordinha na esquerda e na direita e no hover elas aumentam e as letrinhas do que está escrito se separam.

Espero que agradem vocês! ~

1. Acima de ]]></b:skin> cole o código abaixo:

.menualong {

background:  url('http://static.tumblr.com/0xqvkot/nksmaeg5f/9__2_.png') repeat fixed center;

border-right: 5px solid #AFEEEE;

border-left: 5px solid #AFEEEE;

text-align: center;

color: #FF69B4;

-webkit-transition: 0.7s;

font-size: 8px;

font-family: handy;

text-transform: Uppercase;

}

.menualong:hover {

border-right: 50px solid #B0E0E6;

border-left: 50px solid #B0E0E6;

-webkit-transition: 0.7s;

letter-spacing: 6px;

color: #FF69B4;

background:  url('http://static.tumblr.com/0xqvkot/nksmaeg5f/9__2_.png') repeat fixed center;

}

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

Clique aqui e veja uma explicação de como editar o código. 

2. Agora, vá em Add Gadget >> HTML/JAVASCRIPT e cole:

<center><div class="menualong"><a href="link">Nome</a></div>

<center><div class="menualong"><a href="link">Nome</a></div>

<center><div class="menualong"><a href="link">Nome</a></div>

<center><div class="menualong"><a href="link">Nome</a></div>

<center><div class="menualong"><a href="link">Nome</a></div> 

Onde está 'link' você cola o código da Respectiva página, e em Nome você coloca o nome da página.

Espero que tenham gostado, qualquer dúvida é só falar e credite se usar!