Tutorial: Menu Pikachu

Oii minhas flores de primavera!! Bom, a pedido especial eu trouxe a vocês o Menu Pikachu, igual ao do blog, créditos totalmente ao blog The Lovers, e quem quiser o tuto é só clicar em Read More..

Primeiro vá no seu HTML, clique em CTRL+F e procure por ]]></b:skin> logo ACIMA dessa tag cole:

/* Menu Pikachu por The Lovers */

pikachu{

background:  #f8f8ff; /* Cor de Fundo */

color: #000000; /* Cor da Fonte */

border-left: 3px solid # 68228B; /* Cor da borda lateral esquerda */

border-right: 3px solid #68228B; /* Cor da borda lateral direita */

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

display:inline; /* Modo de exibição */

border-radius: 10px;

-webkit-transition-duration: .50s;

padding: 6px;

margin: 2px;

font-size: 11px; /* Tamanho da fonte */

text-align: center;

width:15%; /* Tamanho do menu*/

float: left;

font-family:  Arial; /* Nome da fonte do menu */

}

pikachu:hover{

border-left: 3px solid # B0E0E6; /* Cor da borda lateral esquerda ao passar o mouse*/

border-right: 3px solid # B0E0E6; /* Cor da borda lateral direita ao passar o mouse */

background: #f2f2f2; /* Cor de Fundo */

color: #000000; /* Cor da Fonte ao passar o mouse */

text-shadow: 0px 0px 2px #6b6b6b; /* cor da sombra do texto do menu */

display:inline; /* Modo de exibição */

-webkit-transition-duration: .50s;

padding: 6px;

margin: 2px;

font-size: 11px; /* Tamanho da fonte do menu ao passar o mouse */

text-align: center;

width: 18%; /* Tamanho do menu ao passar o mouse */

float: left;

font-family: arial; /* Nome da fonte do menu ao passar o mouse */

}

Caso queira uma imagem de fundo, troque:

background:  #f8f8ff; /* Cor de Fundo */

Por:

background: url("URL IMAGEM") repeat;

Mude as cores de acordo com seu gosto, se quiser, utilize a tabela de cores clicando aqui. 

Para usar, cole o seguinte código em um HTML//JavaScript:

<a href="LINK DA PÁGINA"><pikachu>NOME DA PÁGINA</pikachu></a>