27 março 2013

Menu em forma de botão

Bom, lembrando que achei os códigos em themes blogskins ^^
O efeito é esse: {em breve aqui}
Vamos aos códigos. Adicione o código abaixo em seu css (style):
a.botmenu { letter-spacing: 1pt; background-color: transparent; font-size: 7pt; font-family: tahoma; color: #111; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; display: block; margin: 1px 0; padding: 3px 3px 3px 3px; text-align: left; text-decoration: none; text-transform: uppercase; text-align:center; -webkit-transition-duration:0s; cursor: pointer; width: 100px;}

a.botmenu:hover { border: 1px solid #ddd; border-bottom: transparent; border-right: transparent; text-transform: uppercase; background-color: #fcfcfc; }
Depois coloque o código abaixo onde quer que seu menu apareça:
<a href="" class="botmenu">Teste</a>
<a href="" class="botmenu">Teste</a>
<a href="" class="botmenu">Teste</a>
<a href="" class="botmenu">Teste</a>
<a href="" class="botmenu">Teste</a>
É isso. Daí tu pode mecher no css, mudar cores, tamanho da caixinha do menu, font... enfim, fique a vontade ^^
Usou? Dê like!

0 comentários :

Postar um comentário