Vc quer fazer um efeito de botão num link normal?!
Ah, então é assim:
<STYLE>
A:link { ... }
A:visited { ... }
A:active { ... }
A:hover { ... }
</STYLE>
No caso, todos os links do seu site terão o mesmo style.
Caso você queira criar uma classe, faça assim:
<STYLE>
A.nome_da_classe:link { ... }
A.nome_da_classe:visited { ... }
A.nome_da_classe:active { ... }
A.nome_da_classe:hover { ... }
</STYLE>
E para o link: <A CLASS="nome_da_classe" HREF="..." ...>Link</A>
Bem, pra você simular um botão, você terá que pensar em:
- borda
- espaçamento
- fundo
- fonte
- cores
- nos eventos (já possuimos 4, é o suficiente)
Para mexer com a borda, use o atributo:
border
Lembre-se que border possui vários tipos... dashed, solid, double, etc.
E também você poderá variar a cor e a espessura.
Por exemplo:
border: 1px solid rgb(255, 255, 0);
Mas, suponhamos que você queria deixar a borda com 2 cores diferentes... ou seja, simular um efeito 3D.
Para isto, você poderá usar (neste caso, não use o border) o border-top, border-left,boder-right e border-bottom.
Exemplo:
border-top: 1px solid rgb(255, 255, 0);
border-left: 1px solid rgb(255, 255, 0);
border-right: 1px solid rgb(0, 255, 255);
border-bottom: 1px solid rgb(0, 255, 255);
PS.: NÃO TESTE COM ESTAS CORES... Eu coloquei como exemplo, deve estar muito tosco!
Bem, resolvemos o problema da borda...
Agora vem o espaçamento. Você pode deixar espaços entre a borda e o início do texto. É o que chamamos de espaçamento no Word e é como o CSS chama de padding.
Você pode usar o padding destas formas:
1- usando padding em tudo
Exemplo:
padding: 5px 5px 5px 5px;
Outro exemplo:
padding: 3px 9px 2px 5 px;
Sinceramente eu não me lembro da ordem... mas cada um simboliza left, top, right e bottom.
2- Você pode alterar um padding específico, exemplo:
padding-left: 5px;
Outro exemplo:
padding-top: 2px;
Agora, já escolhemos a borda e o espaçamento... falta o background e a fonte (cores já estão sendo escolhidas).
Para escolher o background, use este atributo:
background-color: #FFFF00;
Eu exemplifiquei uma cor usando seu código Hexadecimal. Você pode escolher a cor nos seguintes modos:
- RGB, ex.: background-color: rgb(255, 255, 0);
- Hexadecimal, ex.: background-color: #FFFF00;
- Por nome, ex.: background-color: blue;
Chegamos ao finalmente... A FONTE!!!
Para alterar o tipo de fonte, use: font-family
Exemplo: font-family: Verdana;
Para alterar o tamanho da fonte, use font-size
Ex.: font-size: 8pt;
Para alterar a decoração do link (retirar o sublinhado), use: text-decoration
Para retirar o sublinhado: text-decoration: none;
Para adicionar outro estilo à fonte (negrito, itálico), use font-weight
Ex.: font-weight: bold;
Pronto!!! Construa baseado nisso seus links "botões"...
Espero ter ajudado...
Valeu,
