Como criar um botão de imagem para submit ou reset, sem javascript e âncora(href)

Como a idéia é ser prático, segue o exemplo de como criar um botão de imagem para submit ou reset, sem javascript e âncora(href):

adicione o style abaixo na sua página ou arquivo de css:

button{
 cursor:pointer;
 border: 0px none;
 background-color: transparent;
 padding: 0px 0px 0px 0px;
}
button.img{
 border: 0px none;
}

Adicione o código html abaixo para criar os botões:

<button type="submit">
 <img src="bt_salvar.jpg" alt="Salvar" title="Salvar">
</button>
&nbsp;
<button type="reset">
 <img src="bt_limpar.jpg" alt="Limpar" title="Limpar">
</button>

Segue o código completo do exemplo:

<TITLE>Botão Imagem</TITLE>
    <META NAME="Author" CONTENT="Ricardo Spinoza">
  <style>
	  button{
	   cursor:pointer;
	   border: 0px none;
	   background-color: transparent;
	   padding: 0px 0px 0px 0px;
	}
	button.img{
		border: 0px none;
	}
  </style>
 </HEAD>

 <BODY>
    <button type="submit">
   <img src="bt_salvar.jpg" alt="Salvar" title="Salvar">
</button>
&nbsp;
<button type="reset">
    <img src="bt_limpar.jpg" alt="Limpar" title="Limpar">
</button>
 </BODY>
</HTML> <br> 

abaixo as imagens do exemplo:

2 Comentários

Arquivado em CSS, HTML

2 Respostas para “Como criar um botão de imagem para submit ou reset, sem javascript e âncora(href)

  1. BIU

    Parrabeins, Garrotinho!

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s