27 de novembro de 2014

Menu Button


Vejam o tutorial de um menu que imita um botão. Temos a visualização online, vem ver.


image
Visualização Online (xx)

Bom, lembrando que achei os códigos em themes blogskins ^^

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 mexer no css, mudar cores, tamanho da caixinha do menu, font... enfim, fique a vontade ^^

Bom uso! Comenta ai se lhe foi útil.

0 comentários :

Postar um comentário