Para isso vamos partir da imagem do exemplo anterior, a qual vamos recortar os dois extremos curvos, usando para isso algum programa gráfico, como Paint Shop Pro. O processo se resume na seguinte figura:
Com isto, obtemos os dois extremos que vão nos fazer falta para nosso truque.
O seguinte passo é criar uma tabela que contenha em seus extremos laterais as imagens anteriores, ficando no centro uma célula vazia (para que se mantenham os tamanhos das células sem conteúdo introduzimos nelas um gif transparente de 1x1 pixels, bs.gif):
 |
 |
 |
| ||
|
Na célula vazia vamos situar o botão com estilos do exemplo 2, obtendo com isso uma reprodução do que era a imagem inteira, mas que agora será uma tabela-botão:
|
<style type="text/css"> .botao2{ font-size:10px; font-family:Verdana,Helvetica; font-weight:bold; color:white; background:#638cb5; border:0px; width:70px; height:15px; } </style> <form name="form1" action="http://www.yahoo.com" target="_blank" method="post"> <div align="center"><input type="text" name="prova"></div><br> <table cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td rowspan="3" width="5" height="19"><img src="images/curva_azul_izq.gif" width="5" height="19" border="0" alt=""></td> <td height= "1" width="70" bgcolor="#638cb5"><img src="images/bs.gif" width="1" height="1" border="0" alt=""></td> <td rowspan="3" align="right" width="5" height="19"><img src="images/curva_azul_der.gif" width="5" height="19" border="0" alt=""></td> </tr> <tr align="center"> <td height= "17" bgcolor="#638cb5"><input type="submit" name="envio" value="enviar" class="boton2"></td> </tr> <tr> <td height= "1" width="70" bgcolor="#638cb5"><img src="images/bs.gif" width="1" height="1" border="0" alt=""></td> </tr> </table> </form> |
Cujo resultado é o seguinte:
Este botão é colorido, tem os lados curvos e admite os eventos típicos dos botões-padrão, portanto se situarmos o cursor na caixa de texto e clicamos Enter, os dados se enviarão.
Além disso, também podemos acessar as demais propriedades de um botão, por exemplo, a disabled (Internet Explorer e Netscape 6x), que ativa ou desativa um botão, de tal forma que aparece normal ou "morto", sem ter operatividade. O código necessário para isso é:
|
<div align="center"><a href=
"#"onclick="document.forms.form1.envio.disabled=true;return
false;">desativar</a></div> <div align="center"><a href= "#"onclick="document.forms.form1.envio.disabled=false;return false;">ativar</a></div> |
Que pode ser visto em funcionamento a seguir:
Se clicarmos no link "desativar", poderemos observar como o texto do botão aparece no Internet Explorer com a cor cinza, e se clicarmos sobre ele não acontecerá nada. O mesmo ocorre no Netscape 6x, embora neste caso o texto do botão não sofre mudanças. Ao clicar sobre o link "ativar", o botão volta ao seu estado inicial.
O único problema é que no Netscape 4x o resultado fica muito feio, pelo fato deste navegador não admitir estilos para os botões. Portanto, este sistema é aconselhável para aquelas páginas que forem desenhadas Internet Explorer e/ou Netscape 6x.
