Aqui está uma pequena abordagem sobre o tema Botões. Com o tempo irei colocando outros exemplos práticos até que o assunto seja dominado por completo. Como sempre faço, o código-fonte está à esquerda e o exemplo a direita. O mesmo comando também está apresentado na forma de link e com arquivos de imagem, isso é bom para efeito de comparação.

Comando "Fecha a janela".

<FORM> <INPUT TYPE="button" NAME="Button" VALUE="Fechar a janela" ONCLICK="window.close()"> </FORM>

 

<A HREF=JavaScript:window.close()>Fechar a janela</a>

Fechar a janela

<A HREF=JavaScript:window.close()> <IMG SRC="imagens/fechar.gif"></a>

Comando "Imprime esta página".

<FORM> <INPUT TYPE="button" NAME="Button" VALUE="Imprimir esta página" ONCLICK="window.print()"> </FORM>

 

<A HREF=JavaScript:window.print()>Imprimir esta página</a>

Imprimir esta página

 

<A HREF=JavaScript:window.print()> <IMG SRC="imagens/imprimir.gif"></a>

Comandos "Voltar" e "Avançar".

<FORM> <INPUT TYPE="button" NAME="Button" VALUE="Voltar" ONCLICK="window.history.go(-1)"> </FORM>

<A HREF="javascript:window.history.go(-1)">Voltar</a>

Voltar

 

<FORM> <INPUT TYPE="button" NAME="Button" VALUE="Avançar" ONCLICK="window.history.go(1)"> </FORM>

<A HREF="javascript:window.history.go(1)">Avançar</a>

Avançar

Comando "Código Fonte".

<INPUT TYPE="button" VALUE="Código Fonte" ONCLICK="window.location = &quot;view-source:&quot; + window.location.href">

 

BOTÕES COLORIDOS

Você já deve ter reparado na Rede o uso de botões personalizados, isso é, aqueles botões que possuem belas cores e não o cinza tradicional. Pois bem, agora vamos aprender como faze-los. Vou apresentar a sintaxe de dois botões simples, que chamarei de Botão 1 e Botão 2, eles vão me servir de base para alguns exemplos:

<INPUT TYPE="submit" NAME="button" VALUE="Botão 1"> <INPUT TYPE="submit" NAME="button" VALUE="Botão 2">

Esta é a configuração básica de um botão. O atributo VALUE="texto" é o que apresenta a escrita na sua superfície. Agora vou acrescentar alguns parâmetros interessantes: O Botão 1 terá uma letra azul escuro (color: 0000FF) e um fundo azul claro (background-color: 87CEFA), o Botão 2 terá uma letra preta (color: 000000)e um fundo amarelo ouro (background-color: FFD700).

<INPUT TYPE="submit" NAME="button" VALUE="Botão 1" STYLE="color:0000FF; background-color:87CEFA"> <INPUT TYPE="submit" NAME="button" VALUE="Botão 2" STYLE="color:000000; background-color:FFD700">

 

BOTÕES LINKADOS

Agora vamos ao ponto mais importante: Endereçar os botões com links. Para isso vou ter que renomear os botões, por uma questão de referência. O botão 1 passará a ser o Cadê? e o 2 será o Tay Metapesquisador (Cadê? e Tay são poderosas ferramentas de busca brasileiras). Um detalhe de apresentação será incluir o parâmetro STYLE="cursor:hand" para que o cursor mude para a mãozinha quando o mouse sobrepõe o botão. Repare que antes, nos botões 1 e 2 acima, isso não acontecia. Para aprender mais sobre cursores vá para [Alterando o formato do cursor] ou também [Link que muda o cursor].

<FORM METHOD=GET ACTION="http://www.cade.com.br/">
<INPUT TYPE="submit" NAME="button" VALUE="Cadê?"
STYLE="cursor:hand; color:0000FF; background-color:87CEFA">
</FORM>

<FORM METHOD=GET ACTION="http://www.tay.com.br/">
<INPUT TYPE="submit" NAME="button" VALUE="Tay Metapesquisador"
STYLE="cursor:hand; color:000000; background-color:FFD700">
</FORM>

Note que o tamanho do botão se ajusta automaticamente a quantidade de caracteres que tem na sua superfície. Para alinhar os botões lado-a-lado vou recorrer aos recursos de <TABLE> (tabela).

<CENTER>
<TABLE>
<TR>
<TD>
    <FORM METHOD=GET ACTION="http://www.cade.com.br/">
    <INPUT TYPE="submit" NAME="button" VALUE="Cadê?"
    STYLE="cursor:hand; color:0000FF; background-color:87CEFA">
    </FORM>
</TD>
<TD>
    <FORM METHOD=GET ACTION="http://www.tay.com.br/">
    <INPUT TYPE="submit" NAME="button" VALUE="Tay Metapesquisador"
    STYLE="cursor:hand; color:000000; background-color:FFD700">
    </FORM>
</TD>
</TR>
</TABLE>
</CENTER>

Continuando, você notou que os botões personalizados apresentados acima são estáticos, isso é, não reagem a sobreposição do mouse. Movimente o mouse sobre eles (sem clicar) e repare que eles parecem uma reles imagem em seu monitor. Então vamos sofisticar um pouco mais esses exemplos. Agora vamos aprender como fazê-los responder a sobreposição do mouse com alternamento de cores.

PRIMEIRO PASSO: Insira o código CSS/JavaScript a seguir entre as tags <HEAD> e </HEAD>. Observe os seletores .troca1 e .troca2. São eles que irão definir as cores iniciais do botão. Como escolhi duas cores diferentes então tenho que usar dois seletores com propriedades diferentes.

<STYLE> .troca1 {background-color:87CEFA} .troca2 {background-color:FFD700} </STYLE>   <SCRIPT LANGUAGE="JavaScript1.2"> <!-- function Troca(cor){ var mud=event.srcElement           if (mud.tagName=="INPUT"&&mud.type=="submit")           event.srcElement.style.backgroundColor=cor } //--> </SCRIPT>

SEGUNDO PASSO: Agora vem a sintaxe dos botões que irão responder a sobreposição do mouse. Usei exatamente o modelo anterior com os acréscimos (em negrito) das funções onMouseover e onMouseout. As cores em hexadecimal 98DFFA (azul claro) e 87CEFA (azul escuro), FFE811 (amarelo claro) e FFD700 (amarelo escuro) foram escolhidas a gosto.

<CENTER>
<TABLE>
<TR>
<TD>
    <FORM METHOD=GET ACTION="http://www.cade.com.br/"
    onMouseover="Troca('98DFFA')" onMouseout="Troca('87CEFA')">
    <INPUT TYPE="submit" NAME="button" VALUE="Cadê?"
    STYLE="color:#0000FF; cursor:hand" class="troca1">
    </FORM>
</TD>
<TD>
    <FORM METHOD=GET ACTION="http://www.tay.com.br/"
    onMouseover="Troca('FFE811')" onMouseout="Troca('FFD700')">
    <INPUT TYPE="submit" NAME="button" VALUE="Tay Metapesquisador"
    STYLE="color:#000000"; cursor:hand" class="troca2">
    </FORM>
</TD>
</TR>
</TABLE>
</CENTER>

Pronto!

 

BOTÕES TEXTURIZADOS

Usando background para inserir texturas, porém, antes quero apresentar outro recurso que será útil conhecer. Geralmente a superfície do botão é muito pequena e isso dificulta uma definição clara de sua textura. Para resolver esse problema vou usar o atributo padding cuja função é definir o distanciamento entre o texto (do botão) e suas bordas, manipulando a sua área de superfície. Os valores usados em padding são points (pt), inches (in), centimeters (cm), pixels (px) ou percentage (%). Aprenda mais sobre esse atributo em [Espaçamento entre o texto e as bordas].

<INPUT TYPE="submit" NAME="button" VALUE="Botão 1" STYLE="color:000000">

 O botão 1 possui o tamanho default, sem padding

Agora os botões 2 (padding:5px), 3 (padding:9px) e 4 (padding:12px), respectivamente. A sintaxe abaixo refere-se apenas ao botão 2.

<INPUT TYPE="submit" NAME="button" VALUE="Botão 2" STYLE="color:000000; padding:5px">

   

Pronto, já temos recurso para inserir as texturas. Elas não devem dificultar a leitura do texto que está na superfície, portanto tenho que fazer uma seleção das mais adequadas. As escolhidas foram as seguintes:

textura01.jpe

fundo3.jpe

textura23.jpe

Através do atributo background:url(...) vou inseri-las dentro dos botões. Novamente só vou apresentar a sintaxe do botão 2, as demais é só copiar a mesma sintaxe e alterar o nome do arquivo.

<INPUT TYPE="submit" NAME="button" VALUE="Botão 2"
STYLE="color:000000; padding:5px; background:url(imagens/textura01.jpe)">

   

 

TAMANHO & FORMATO DOS BOTÕES

Na lição acima usei a propriedade padding para alterar o tamanho do botão porém esta propriedade não foi criada especificamente para isso. Para manipular o tamanho, bem como, o formado quadrado ou retangular do botão usamos as propriedades width e height. Seus valores podem ser em pixel (px), point (pt), centimeter (cm) e inches (in). Agora a sintaxe do botão 2 ficou assim:

<INPUT TYPE="submit" NAME="button" VALUE="Botão 2"
STYLE="color:000000; width:25; height:120; background:url(imagens/textura01.jpe)">

   

Repare, no botão 2, que ao especificar seu tamanho com essas propriedades ele perdeu o ajuste automático deixando seu texto ilegível. Este é um cuidado que devemos tomar.

 

BOTÕES COM IMAGENS

Agora vou usar background para inserir uma imagem no botão. Nesse caso vou omitir o texto de sua superfície configurando VALUE="&nbsp;", depois é só configurar as propriedades width & height para o tamanho da imagem. Com a ausência do texto a figura deverá transmitir uma idéia de qual seria a função do botão, logicamente, senão o internauta terá que clicar nele pra descobrir onde vai dar. Nesse caso então coloque um título explicativo title="descrição" logo após o link e tudo estará resolvido. Nos exemplos abaixo configurei quatro botões com o link de ferramentas de busca com as sua respectivas figuras.

Vou apenas apresentar a sintaxe do botão Cadê? (para não ficar repetitivo). Os demais é só copiar a sintaxe e mudar o link e a figura. Observe que o parâmetro title="Ferramenta de Busca" só está inserido no link Cadê?. Passe o mouse sobre os links e repare a diferença.

<FORM METHOD=GET ACTION="http://www.cade.com.br/" title="Ferramenta de Busca""> <INPUT TYPE="submit" NAME="button" VALUE="&nbsp;" STYLE="color:000000; width:94; height:40; background:url(imagens/cade.gif); cursor:hand"></FORM>

Note que embora o arquivo cade.gif possua um tamanho de 88 x 34px configurei o tamanho do botão com 94 x 40px para compensar as bordas do botão (3px para cada lado).