Hover no input type button

[Wagner Martins - SC 0]

Olá,

 

Quero aplicar um efeito :hover em um botão, estou utlizando assim no css, mais o botão fica emcima da imagem. como posso tirar o texto do botão que fica em cima da imagem (background)?

 

 

.botao_add{
background-image:url(images/botao_adicionar_produtos_1.png);
background-repeat:no-repeat;
}
.botao_add:hover{
background-image:url(images/botao_adicionar_produtos_2.png);
background-repeat:no-repeat;
}

[Dian Carlos 29]

<input class="botao" name="botaoLOL" type="submit" value="">

 

no seu css poe assim

input.botao, input.botao:visited {
background: url(images/botao_adicionar_produtos_1.png) no-repeat;
}
input.botao:hover {
background: url(images/botao_adicionar_produtos_2.png) no-repeat;
}
input.botao:active {
background: url(images/botao_adicionar_produtos_2.png) no-repeat;
}

[Fernando Neto MH 13]

Acrescentando no cógido do Dian Carlos fica assim

input.botao, input.botao:visited {
background: url(images/botao_adicionar_produtos_1.png) no-repeat;
       border:0px; /* retirar a borda */
}
input.botao:hover {
background: url(images/botao_adicionar_produtos_2.png) no-repeat;
}
input.botao:active {
background: url(images/botao_adicionar_produtos_2.png) no-repeat;
}

[Henrique Barcelos 290]

Dian Carlos e Fernando Neto, usem o botão Responder azul ou a resposta rápida para responder tópicos.

[Marco Bruno 19]

Boa noite, Wawa Bodyboard 2006.

 

Você esta utilizando um input porque esta dentro de um formulário? Caso não esteja dentro de uma formulário, não é correto utilizar o input, a melhor implementação é a tag "a" (anchor).

 

Segue abaixo um exemplo resumido para implementação da famosa classe "replacement":

 

.replacement { position: relative; }

.replacement span {
   position: absolute;
   left: 0; top: 0;
   width: 100%; height: 100%;
}

a span { backgroud: url('images/sprite.png') no-repeat; }

.first span { background-position: 100px 100px; }
.second span { background-position: 100px 200px; }
.third span { background-position: 100px 300px; }

<!-- Exemplo de um menu que tera icones -->
<a href="#" class="first replacement">Home<span></span></a>
<a href="#" class="second replacement">Fotos<span></span></a>
<a href="#" class="third replacement">Contato<span></span></a> 

 

Caso o texto seja maior do que a imagem e não resolver o problema, temos a propriedade "text-indent" como solução, mas deixe esta propriedade como ultima opção, pois você pode acabar escondendo o conteúdo(texto) do usuário caso a imagem não seja carregada.

[Wagner Martins - SC 0]

Bom dia Marcelo Bruno,

 

Estou usando dentro do formulário sim, eu já consegui fazer, fiz assim:

 

 

 

input.botao_enviar_lista_pedidos_1:hover {
       background: url(images/botao_enviar_lista_pedidos_2.png) no-repeat;
}
input.botao_enviar_lista_pedidos_1:active {
       background: url(images/botao_enviar_lista_pedidos_2.png) no-repeat;
}
input.botao_enviar_lista_pedidos_1 { 
      background: url(images/botao_enviar_lista_pedidos_1.png) no-repeat;
       border:0px; /* retirar a borda */
	width:141px;
	height:27px;
}

[Marco Bruno 19]

Boa Wawa Bodyboard 2006.

 

Da uma estuda na classe "replacement" é bem interessante.