Como alterar uma imagem de botão de entrada usando CSS?

Então, eu posso criar um botão de entrada com uma imagem usando

<INPUT type="image" src="/images/Btn.PNG" value="">

Mas não consigo o mesmo comportamento usando CSS. Por exemplo, eu tentei

<INPUT type="image" class="myButton" value="">

onde "myButton" é definido no arquivo CSS como

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Se isso é tudo que eu queria fazer, poderia usar o estilo original, mas quero mudar a aparência do botão ao passar o mouse (usando uma myButton:hoverclasse). Sei que os links são bons, porque consegui carregá-los como imagem de plano de fundo para outras partes da página (apenas como verificação). Encontrei exemplos na web de como fazer isso usando JavaScript, mas estou procurando uma solução CSS.

Estou usando o Firefox 3.0.3 se isso faz diferença.

Se você deseja estilizar o botão usando CSS, crie um botão type = "submit" em vez de type = "image". type = "image" espera um SRC, que você não pode definir em CSS.

Observe que o Safari não permitirá que você estilize nenhum botão da maneira que procura. Se você precisar do suporte ao Safari, precisará colocar uma imagem e ter uma função de onclick que envia o formulário.

Você pode usar a <button>tag. Para enviar, basta adicionartype="submit" . Em seguida, use uma imagem de plano de fundo quando desejar que o botão apareça como um gráfico.

Igual a:

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>

Mais informações: http://htmldog.com/reference/htmltags/button/

HTML

<div class="myButton"><INPUT type="submit" name="" value=""></div>

CSS

div.myButton input {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Isso funcionará em qualquer lugar, mesmo no Safari.

Este artigo sobre substituição de imagem CSS para botões de envio pode ajudar.

"Usando esse método, você obtém uma imagem clicável quando as folhas de estilo estão ativas e um botão padrão quando as folhas de estilo estão desativadas. O truque é aplicar os métodos de substituição da imagem a uma tag de botão e usá-la como botão de envio, em vez de usando a entrada.

E uma vez que as fronteiras dos botões são apagados, é também a mudança recomendável o botão do cursor para a mão em forma utilizada para links, uma vez que este fornece uma dica visual para os usuários ".

O código CSS:

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

Aqui está uma solução mais simples, mas sem div adicional:

<input type="submit" value="Submit">

O CSS usa uma técnica básica de substituição de imagem. Para pontos de bônus, ele mostra usando um sprite de imagem:

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

Fonte: http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

Aqui está o que funcionou para mim no Internet Explorer, uma ligeira modificação na solução por Philoye.

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}

Você pode usar blank.gif (imagem transparente de 1 px) como destino na sua tag

<input type="image" src="img/blank.gif" class="button"> 

e depois estilize o plano de fundo em css:

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}

Uma variação nas respostas anteriores. Eu descobri que a opacidade precisa ser definida, é claro que isso funcionará no IE6 e assim por diante. Houve um problema com a solução de altura da linha no IE8, em que o botão não respondeu. E com isso você obtém um cursor de mão também!

<div id="myButton">
  <input id="myInputButton" type="submit" name="" value="">
</div>

#myButton {
 background: url("form_send_button.gif") no-repeat;
 width: 62px;
 height: 24px;
 }

#myInputButton { 
 background: url("form_send_button.gif") no-repeat;
 opacity: 0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 width: 67px;
 height: 26px;
 cursor: pointer;
 cursor: hand;
}

Eu acho que a seguinte é a melhor solução:

css:

.edit-button {
    background-image: url(edit.png);
    background-size: 100%;
    background-repeat:no-repeat;
    width: 24px;
    height: 24px;
}

html:

<input class="edit-button" type="image" src="transparent.png" />

Minha solução sem js e sem imagens é esta:

* HTML:

<input type=Submit class=continue_shopping_2 
name=Register title="Confirm Your Data!" 
value="confirm your data">

* CSS:

.continue_shopping_2:hover{
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;}


.continue_shopping_2{
padding:0 0 3px 0;
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:174px;
height:21px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#919191;
font-family:Verdana;
font-size:13px;
font-style:normal;
line-height:normal;
font-weight:bold;
color:#FFFFFF;}

Talvez você também possa importar um arquivo .js e ter a substituição da imagem lá, em JavaScript.

Vamos supor que você não pode alterar o tipo de entrada ou mesmo o src. Você só tem CSS para brincar.

Se você conhece a altura desejada e possui o URL de uma imagem de plano de fundo que deseja usar, está com sorte.

Defina a altura como zero e a parte superior do estofamento para a altura desejada. Isso afastará a imagem original, dando a você um espaço perfeitamente limpo para mostrar sua imagem de fundo em CSS.

Funciona no Chrome. Não faço ideia se funciona no IE. Quase nada de inteligente faz, então provavelmente não.

#daft {
  height: 0;
  padding-top: 100px;
  width: 100px;
  background-image: url(clever.jpg);
}

<input type="image" src="daft.jpg" id="daft">