Menu Symmetry

Yo meus brigadeiros, trago mais um menuzinho desta vez não é feito por mim, mas sim pelo blog Sweet Poison, ele se chama Symmetry ele e bem maneiro, não teve como eu colocar imagem, mas caso queira dar uma olhadinha é só clicar no botão abaixo.

Brevia do efeito

1. Vá em seu HTML e procure por:

]]></b:skin>

2. Acima dele coloque o proximo codigo:

Códigos

.symmetry {
background-color:#00CED1;
display: inline-block;
text-align: right;
color:#fff;
float: center;
margin:1px;
font-size: 9px;
font-family: tahoma;
text-transform:uppercase;
padding:1px;
height:10px;
width:200px;
box-shadow: 0 0px 0px #eee;
z-index:100;
display:inline-block;
}

.symmetry:hover {
background-color:#F5F5F5;
-webkit-transition-duration: 0.8s;
}

.symmetry2 {
background-color:#AFEEEE;
display: inline-block;
text-align: center;
color:#fff;
float: center;
margin:1px;
font-size: 9px;
font-family: tahoma;
text-transform:uppercase;
padding:1px;
height:10px;
width:120px;
box-shadow: 0 0px 0px #eee;
z-index:100;
display:inline-block;
padding-left:50px;
}

.symmetry2:hover {
background-color:#F5F5F5;
-webkit-transition-duration: 0.8s;
}

3. Salve e vá para Layout e lá adicione um gadget de HTML/Javascript e dentro coloque:

Códigos

<a href="URL 1" class="symmetry">Link 1</a><br>
<a href="URL 2" class="symmetry2">Link 2</a><br>
<a href="URL 3" class="symmetry">Link 3</a><br>
<a href="URL 4" class="symmetry2">Link 4</a><br>
<a href="URL 5" class="symmetry">Link 5</a><br>