CriarWeb.com > Manuais > Workshop de CSS

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.

O melhor para ter uma idéia do objetivo deste workshop é ver um exemplo.

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.

Tão simples como isto. Se desejar, pode-se ver o exemplo em funcionamento.