CSS: Colocar imagem personalizada como botão submit

Publicado por Perfil removido em 04/05/2009

[ Hits: 44.018 ]

 


CSS: Colocar imagem personalizada como botão submit



Boas malta!

Ainda há pouco tempo eu queria colocar um botão bem bacana usando uma imagem de minha escolha. Funcionava bem, ela era apresentada em todos os navegadores substituindo a aparência padrão de um botão Submit, mas quando eu clicava neles supostamente deviam fazer uma certa função para mim. Era uma espécie de menu de navegação para um calendário.

Se eu carregasse num botão ele vinha para o mês anterior, se eu carregasse noutro ia para o mês a seguir, caso não carregasse nenhum mostrava o mês atual obtido com o método getdata() do PHP. E depois outra função ia fazer o calendário do mês com as semanas e o mês atual e ao lado ia buscar no MySQL todos os eventos para aquele mês e ano, tudo dentro do mesmo código PHP.

Funcionava perfeitamente em Firefox 3, Google Chrome e Safari (do Windows, não tinha MAC para testar). Agora acho que o pessoal concorda comigo, um site deve funcionar em todos os navegadores mais recentes. Certo?

No Opera não funcionava. E como o normal... no Internet Explorer 7 também não funcionava. Os botões estavam lá, mas ao clicar neles voltava ao mesmo arquivo PHP como devia, mas não funcionava. Descobri que o problema era que o IE não enviava o valor dos botões, então o PHP não podia recolhê-los para fazer o seu trabalho.

Isso pode ser resolvido facilmente, com um bocadinho de trabalho e recorrendo ao CSS.

1 - Crie 1 ficheiro sem nada dentro com o nome de "bt.css";

2 - Abra o seu código onde tem os botões e coloque a seguinte linha, logo abaixo da tag TITLE:

<link href="/css/bt.css" rel="stylesheet" type="text/css" />

Isto simplesmente vai importar a folha de estilos para o seu código e mudar os botões.

3 - Abra o arquivo "bt.css" e dentro coloque:

@charset "utf-8";
#bt_mes1 {
  width: 21px;
  height: 18px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(/images/bt_anterior.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* vai por o cursor como forma de mão ao passar por cima do botão */
  cursor: hand; /* para o IE 5.x */
}

Depois só tem que substituir a URL pelo endereço da sua imagem, mudar a altura (height) e largura (width) em pixeis pelo tamanho que sua imagem tem. E claro, onde tem "bt_mes1", aí é o ID do botão.

Agora só tem mais uma coisa. No Opera os valores dos botões "value" seriam visíveis usando este código.

Para isso basta adicionar esta linha, mas usem a critério, ao usarem esta linha deixariam de ver os botões no IE e o valor teria que ser ajustado dependendo dos outros elementos da página.

Agora escolham Opera ou IE! xD

text-indent: -1000em;

Muito simples. Funcionou comigo, por isso deve funcionar com vocês.

Vou continuar trabalhando neste bug do Opera. Se encontrar solução posto aqui.

Meus comprimentos a comunidade, bom poder retribuir finalmente. xD

Outras dicas deste autor

OpenOffice.org e navegador Chomium em português do Brasil no Ubuntu (ou Debian)

Instalando e ativando templates no Joomla

Instalar Java no Debian

Imprimindo fotos em lote com gnome-photo-printer

Como consertar o erro no Adobe Reader

Leitura recomendada

Melhores práticas para um site mais rápido

Como evitar que o CSS do teu site fique armazenado em cache

HTML - Lazy Loading

Como personalizar o thumbnail de seu site no Facebook

Acessibilidade e os padrões Web

  

Comentários
[1] Comentário enviado por Teixeira em 06/05/2009 - 19:11h

É realmente muito desagradável a falta de padrão reinante no mundo web...
A W3C se esforça para estabelecer padrões, mas parece que cada desenvolvedor de browsers quer fazer o seu padrão próprio, independente e incompatível.
Com isso quem sofre é o navegante web, pois deixa de usufruir daquilo que possa existir de melhor em cada página visitada.
Com referência especial ao IE, é lamentável que o desenvolvedor do site tenha que adicionar filtros do tipo "se for IE5, se for IE5.5, se for IE6, se for IE7", sinal de que a MS não toma jeito mesmo...

[2] Comentário enviado por ktinho em 27/12/2010 - 14:24h

pow ensina como posicionar na tela esse botao aqui:



<form method="post" name="form1" action="<?php echo $editFormAction; ?>">
<table align="center">
<tr valign="baseline">
<td nowrap align="right">Nome:</td>
<td><input type="text" name="nome" value="" size="32"></td>
</tr>
<tr valign="baseline">
<td nowrap align="right">Conteudo:</td>
<td><input type="text" name="conteudo" value="" size="32"></td>
</tr>
<tr valign="baseline">
<td nowrap align="right"> </td>
<td><INPUT TYPE='image' SRC='botao.gif'></td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="form1">
</form>


ja faz 15 dias que pesquiuso e nao acho como posicionar na pagina só acho como posicionar imagem.

[3] Comentário enviado por DavidsonDFGL em 14/11/2011 - 16:49h

OI ktinho tudo bem? Bom, axo que você pode por um   antes do input do botão, ficando tipow assim:

   <td><INPUT TYPE='image' SRC='botao.gif'></td>

Axo que pode dar certo, espero ter ajudado.

[ ]'s
Davidson Francis.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts