Menu com hover gradiente

 Olá pessoal, trago para vocês um menu que faz um efeito super fofo, é o menu com hover gradiente.

Para ver este fofo menu clique aqui

Para colocar em seu blog, coloque o código abaixo logo acima da tag  ]]></b:skin>

.menugradiente {

background: url(' SUA IMAGEM ');

display:outline-block;

text-align: center;

font-size:14px;

color: #ffffff;

text-shadow: 0 1px 4px #737070;

float: center;

margin: 2px;

font-family: verdana;

padding: 6px;

width:100px;

height: auto;

-webkit-border-radius:2px;

-moz-border-radius: 2px;

border-radius: 2px;

-webkit-transition-duration: .50s;

}

.menugradiente:hover {

background: url(' SUA IMAGEM ');

text-shadow: 0 1px 4px #737070;

-webkit-transition-duration: .60s;

}

Para fazer o menu funcionar em seu blog, coloque o código abaixo no gadget html/java script

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

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

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

Mais sobre o código:

background: url('Sua imagem'); - No lugar de "Sua imagem" coloque a imagem que desejar.

display: outline-block;  - Mude outline por inline se quiser mudar o menu para um abaixo do outro não lado a lado.

text-align: center; - É o alinhamento do texto. Mude para right (direita) ou left (esquerda).

font-size:14px; - Tamanho da fonte. Quanto maior o número, maior ela fica e vice-versa.

color: #ffffff;  - Cor da fonte.

text-shadow: 0 1px 3px #737070;  - Cor da sombra.

float: center;  - Alinhamento do menu. Mude para right (direita) ou left (esquerda).

margin: 2px; - Espaço entre cada quadradinho do menu. Quanto maior o número, maior o espaço.

font-family: verdana; - Tipo da fonte.

padding: 6px; - Espaço entre as letras e o fim do quadradinho. Quanto maior o número, maior o espaço.

width: 100px; - Largura do quadradinho.

Algumas imagens gradientes