Como trocar botão Submit por uma imagem

[G.Armando 0]

Boa noite

 

 

Pessoal é o seguinte estou fazendo o sistema de login, ae pensei como faço para trocar esse botão de sempre por uma imagem? :huh:

 

procurei na net e achei q assim ia funcionar mais ñ deu certo :[

<input type="image" scr="imagens/login/backgrounds/confirmar.gif" name="MinhaImagem"  id="button" value="Submit" />

Mais ñ deu http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

 

Se alguem poder me dar uma ajuda agradeço. \o

[falcao544 11]

Dê uma olhada aqui:

 

http://www.alvoweb.com/customizar-botao-enviar-submit-usando-uma-imagem-de-botao/

[Bruno Augusto 417]

Ou, pra facilitar, use a tag input com atributo type como submit mesmo, atribua uma classe (ou ID) e estilize via CSS.

 

Eu, particularmente, por preferir botões auto-explicativos, que fogem do convencional Enviar / Resetar, adote a técnica de botões líquidos, onde o mesmo se expande, não importando quanto texto possuir.

 

Originalmente, vi esse artigo, mas agora há pouco, como não o encontrava mais, vi esse outro, em que o autor complementou um pouco mais a técnica.

[angelorubin 142]

Bom dia,

 

Você pode fazer assim também.

 

CSS

 

<style type="text/css">

input {
	background-image:url(imagens/login/backgrounds/confirmar.png);
	background-repeat:no-repeat;
	width:80px;
	height:30px;
	border:none;
	}
	
input:hover {
	background-image:url(imagens/login/backgrounds/confirmar_hover.png);
	background-repeat:no-repeat;
	width:80px;
	height:30px;
	border:none;
	}

</style>

XHTML

 

<input type="submit" scr="imagens/login/backgrounds/confirmar.png" name="submit" value="" />

LINKS DAS IMAGENS UTILIZADAS:

 

botão confirmar.png - http://img96.imageshack.us/img96/7443/confirmar.png

botão confirmar_hover.png - http://img190.imageshack.us/img190/7621/confirmarhover.png

 

Espero que ajude.

[imastersconta 0]

concordo com o angelo essa é a melhor opção

[Bruno Augusto 417]

Não sei não. Posso estar enganado, mas estilizar input afeta todos as possibilidades dessa tag: text, radio, checkbox...

[angelorubin 142]

Boa tarde,

 

Você tem razão IMMAGENS, mas é facil resolver, é só colocar um nome específico e chamar como ID ou CLASSE no HTML ao invés de input como eu sugeri.

[Evandro Oliveira 331]

Você tem razão IMMAGENS, mas é facil resolver [...]

Boa sorte com IE6 e 7. Você vai precisar.

[Thales Caricati 3]

Faz assim...

 

CSS:

.formulario-botao{
   background:url(imagens/botao.gif) top center;
   /*Você pode usar esta classe para definir o tamanho do botão e tudo mais, e assim vai...*/
   width:90px;
}

HTML:

<input type="text" name="" class="formulario-botao" /> <!-- Você usa a classe que chamou no formulário perceba o CLASS="FORMULARIO" -->

[angelorubin 142]

Você tem razão IMMAGENS, mas é facil resolver [...]

Boa sorte com IE6 e 7. Você vai precisar.

 

Bom dia,

 

Olha em testes só deu problema (para variar) no IE6.

 

No IE7 e IE8 rodou tranquilo.

[André Severino 3]

Tente alterar de scr para src que seria o correto.

<input type="image" scr="imagens/login/backgrounds/confirmar.gif" name="MinhaImagem"  id="button" value="Submit" />

Com css também da certo, como já exemplificaram acima.

[Paulo de Tarso F. M. 24]

Uma outra alternativa é, ao invés de utilizar:

<input type="submit" value="Enviar" />

Você pode utilizar:

<button type="submit">Enviar</button>

De qualquer forma, para evitar que outros elementos sejam alterados, é melhor mesmo trabalhar com class ou id para formatá-lo. Aí a imagem você aplica como background. Veja no link abaixo o botão "Enviar" do formulário criado dessa forma que indiquei:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.incon-info.com.br/contato.php

 

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif