Menu com Hover Gradiente

Olá queridos! Eu de novo!? Siim! E com mais tutoriais!!! Bom.. Eu achei no Kawaii World... E achei ele fofo.... Olhem um Exemplo:

Viram!? Ele fica azul quando coloca a seta em cima (só que não apareceu a seta -.-) Bom... Vamos ao tutorial!?

Vá em Modelo >> Editar HTML >> Aperte Ctrl + F e pesquise por:

 ]]></b:skin>

Acima desta Tag cole:

.menugradiente {
background: url('http://i1234.photobucket.com/albums/ff411/SweetLG/16-3.png');
display: inline-block;
text-align: center;
font-size:14px;
color: #ffffff;
text-shadow: 0 1px 3px #b2b2b2;
float: center;
margin: 2px;
font-family: verdana;
padding: 6px;
width: 100px;
height: auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition-duration: .50s;
}
.menugradiente:hover {
background: url('http://i1234.photobucket.com/albums/ff411/SweetLG/17-2.png');
text-shadow: 0 1px 4px #737070;
-webkit-transition-duration: .60s;
}

Salve....Em um HTML / Java Script cole:

<a href="LINK" alt="­" ><div class="menugradiente">NOME DO LINK</div></a>

<a href="LINK2" alt="­" ><div class="menugradiente">NOME DO LINK 2</div></a>

<a href="LINK3" alt="­" ><div class="menugradiente">NOME DO LINK 3</div></a> 

Não é fácil!????

Beijos!