Formulário – Botão com imagem

Inserindo imagem em botão “submit”.
Faça normalmente um botão:
<input type=”submit” value=”OK” id=”btnEnviar” />

Agora no CSS faça o seguinte:
#btnEnviar {
background: url(img/imagem.png) no-repeat;
border: none;
color: #FFF;
cursor: pointer;
font-size: 0.7em;
font-weight: bold;
height: 18px;
margin: 3px 8px 0 0; /* utilizo para direcionar o texto no botão */
width: 25px;
}

OBS: no meu caso eu deixei apenas uma imagem de fundo no botão e deixei aparecendo o texto do OK do VALUE=”OK”
Se preferir deixar apenas a imagem sem o texto basta fazer da seguinte forma:

#btnEnviar {
background: url(img/imagem.png) no-repeat;
border: none;
cursor: pointer;
height: 18px;
line-height: 5000px; /* pra IE */
margin: 0;
overflow:hidden;
text-indent:-5000px; /* útil pra outros browsers */
width: 25px;
}

Também é possível atribuir um efeito no botão, de aumentar ou diminuir a imagem com o seletor:
input:hover {
height: 35px;
width: 50px;
}

No comments yet

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

%d blogueiros gostam disto: