Menu Small Border

Boa tarde, leitores.

Finalmente consegui arrumar meu computador e ele agora não está mais barrando meus acessos ao tumblr, foi mais fácil do que eu esperava, o problema era que meu antivírus desapareceu e com minha mãe e meu pai entrando, ou até mesmo eu, não sei em que site clicamos que o computador endoidou, quando eu instalei meu avg novamente que foi feita a revisão completa, 4 cavalos de Troia foram encontrados.

Mas indo ao assunto do post, hoje trouxe um menu feito por mim, dei a ele o nome de small border, ele é um básico menu de numeração, bem pequenino e com uma borda no hover, ainda não sou muito boa nessas coisas de menu, mas espero que gostem e tenham paciência, aos poucos eu vou melhorando.

 Preview

1. Cole este código acima de ]]></b:skin>:

  .menu2 {

           background: #eee;

font-family: arial;

color: #e49ea6; padding: 4px;

text-align: center;

font-size:12px;

text-shadow: 1px 1px 1px #eec1c8;

box-shadow: 0px 1px 1px #bed5e4;

width: 20px;

display: inline-block;

margin-bottom: 3px;

margin-top:2px;

-webkit-transition: 0.5s ease-in;

-moz-transition: 0.5s ease-in;

-o-transition: 0.5s ease-in;

transition: 1.5s ease-in;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;}

.menu2:hover {

background: #e49ea6;

color: #acc8dd; 

text-shadow: 1px 1px 1px #bed5e4;

box-shadow: 1px 1px 1px #eec1c8;

border-bottom: 2px dashed #fff}

 2. Crie um gadget de HTML/Javascript o código abaixo:

<a href="LINK" class="menu2" title="NOME">01</a>

<a href="LINK" class="menu2" title="NOME ">02</a>

<a href="LINK" class="menu2" title="NOME ">03</a>

<a href="LINK" class="menu2" title="NOME">04</a>

Personalize as áreas em negrito e pronto.