Links com estilo CSS que simulam botões

helldanger1 · Mai 19, 2009

Fazer um botão com CSS sem utilizar formulários, simplesmente com links que se comportam visualmente como botões.
Por Miguel Angel Alvarez - Tradução de JML

Neste workshop de CSS vamos mostrar como realizar um link que tenha aspecto de botão. Com outras palavras, vamos criar botões a partir de links, aplicando uma folha de estilo que fará com que os links sejam mostrados de forma similar como seriam os botões. Para isso, vamos fazer com que, ao passar o mouse por cima de um link, este pareça como se estivesse clicado.

helldanger1 · Mai 19, 2009

O código HTML

Vamos partir basicamente de um link, ao qual atribuiremos uma classe definida com CSS. Como os estilos vão ser aplicados com CSS, o link é tão simples como este:

<a href="#" class="linkbotao">Ola!!</a>

O código CSS

Vamos definir a classe "linkbotao", que é o estilo que se atribuiu para o link. Como sabemos, os links têm diferentes estados (visitados, não visitados, ou com o cursor do mouse por cima), portanto teremos que definir o estilo para cada estado.

.linkbotao { font-family: verdana, arial, sans-serif;
font-size: 10pt;
font-weight: bold;
padding: 4px;
background-color: #ffffcc;
color: #666666;
text-decoration: none;
}
.linkbotao:link,
.linkbotao:visited {
border-top: 1px solid #cccccc;
border-bottom: 2px solid #666666;
border-left: 1px solid #cccccc;
border-right: 2px solid #666666;
}
.linkbotao:hover {
border-bottom: 1px solid #cccccc;
border-top: 2px solid #666666;
border-right: 1px solid #cccccc;
border-left: 2px solid #666666;
}

À princípio, com a classe .linkbotao foram definidos estilos para qualquer estado do link. Depois, para os diferentes estados do link foram definidos seus correspondentes estilos, que são o mesmo para os estados visitado e não visitado, e diferentes para o estado hover, que é o que se aplica quando o mouse está sobre o link.

Links com estilo CSS que simulam botões

helldanger1

GForum VIP

helldanger1

GForum VIP