Vejam o tutorial de um menu que imita um botão. Temos a visualização online, vem ver.
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; }
<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