6 - Menu com hover gradiente

Hello ｡◕‿◕｡

 

Eu estava vendo por aí no google images umas fotos que aparecem uns caras fodásticos, apaixonei-me pelo corpos deles. É simplismente lindo *-* Visão de Deus -parei. Vou mostrar a foto deles. cliquem aqui.
 

Bom, sobre o menu eu peguei do Kawaii World. Ele é um menu bem bonitinho que muda de cor para uma imagem que quiser, o efeito dele é gradiente e ficarei grata se vocês gostarem ^^ Leia mais para aprender como usar o menu.

1. Procure por ]]></b:skin> e acima 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;
 }

2. Cole onde quiser que o menu apareça:

<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>

Espero que tenham gostado do tutorial :)
-kissus-