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

184

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.

Baltimark
fonte

Respostas:

118

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.

ceejayoz
fonte
1
Obrigado. Usando "enviar" em vez de imagem, a imagem é carregada.
Baltimark 12/10/08
16
O Safari 3 e superior permitem que você estilize os botões da maneira que desejar. E para ser mais compatível, use um <botão>.
Eyelidlessness 12/10/08
3
para ser mais compatível / <button> pode comprar outros problemas de compatibilidade.
eglasius
pessoal, verifique a resposta do SI Web Design abaixo. vote se essas respostas forem melhores.
deval
112

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/

Dimitry
fonte
21
Lembre-se de que o IE (5,6,7, & 8 (no modo não-padrão) enviará o .innerHTML do botão, não o atributo de valor que você definiu no botão!
scunliffe 25/08/08
Mas a borda do botão <Remains inf Image está coberta.
amigos estão dizendo sobre
@scunlife, Dimitry em additin postando o innerHTML causa para a maioria dos servidores web não aceitar os dados postados, uma vez que o cheiro é como um ataque de injeção
Cohen
73

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.

SI Web Design
fonte
5
Esta é a melhor resposta. Obrigado
Byron Whitlock
25

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;
}
splattne
fonte
O problema com esse método é que, se o cliente desabilitar imagens no navegador, ele não verá um botão!
24515 Scott
13

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/

philoye
fonte
Eu clique +2 se houvesse um botão para esta resposta para o seletor de atributo CSS (type = "submit") e recomendação para sprites
Dylan Valade
2
Eu não controlo esse site. Ainda bem que coloquei a solução na minha resposta.
precisa saber é
Última versão salva do link: web.archive.org/web/20140112085651/http://work.arounds.org/…
Bernhard Wagner
3

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;
}
user545376
fonte
2

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;}
dafyk
fonte
2

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;
}
Reed Richards
fonte
2

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" />
inf3rno
fonte
1

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;}
John
fonte
2
Não é apropriado postar links aleatórios no seu site dessa maneira. Não vejo 'exemplo' disso tudo lá. Se você deseja fazer um exemplo para mostrar, faça um que sirva de exemplo por si só - não no contexto de um site ao vivo inteiro.
Andrew Barber
está correto ... o fato é que não é possível acessar a página correta diretamente ... apenas adicionando 1 item ao carrinho e indo ao caixa.
John John
0

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


fonte
7
Isso acabou seriamente.
Reed Richards
0

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">

Colin James Firth
fonte