input type="image" ... with LINK and HOVER

Navigation
1

I can not put an effect on a button, I have 3 images made in photoshop, one is Normal (Link), another when hovering, and one when I click (Actived), however, I can not activate these effects via CSS, follow my HTML ... 

<input type="image" src="Botao Azul Normal- OK.png" class="botao">

And the css ... 

.botao:hover{background-image: url('Botao Azul Hover - OK.png');

}

Pictures:

I have not done Actived yet ...

Unfortunately, the Hover effect does not work, the button even appears, but via HTML, I wanted to do via CSS too ...

I managed to launch Chrome and FireFox and ran, my problem is that IE does not work, and the company uses IE8.

    
asked by anonymous 04.08.2014 / 20:36

5 answers

0

The problem of not working in Explorer was simple, it lacked <!DOCTYPE html> , chrome and firefox was good without it, but IE had no way ... put <!DOCTYPE html> that the problem is solved. 

<!DOCTYPE html>
    
19.08.2014 / 14:16
3

You should use type="submit" to be able to style with css. Using type="image" you need "src".

For example:

HTML 

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

CSS 

.botao
{
background: url('img/image.png')  no-repeat;
width: 100px;  // coloca a largura do botao
height: 100px; // coloca a altura do botao
border: none;
}

.botao:hover
{
background: url('img/image_hover.png')  no-repeat;
}

.botao:active
{ 
background: url('img/image_active.png')  no-repeat;
}

.botao:link
{ 
background: url('img/image_normal.png')  no-repeat;
}

.botao:visited
{ 
background: url('img/image_visited.png')  no-repeat;
}
    
05.08.2014 / 11:55
3

You can achieve the intended way as follows: 

<input type="button" class="botao">

.botao {
    background: url("http://i.stack.imgur.com/dfGe4.png");
    height:35px;
    width:90px;
    border:0;
    outline:0;
    -moz-outline:0;
    cursor:pointer;
}
.botao:hover {
    background: url("http://i.stack.imgur.com/D5lJg.png");
}
.botao:active {
    background: url("http://i.stack.imgur.com/nwIyJ.png");
}

Demo on Jsfiddle

Additional information: You can find on this page why it is preferable to use <input> instead of <button> , maybe that's why you were not succeeding with the code suggested by @beterraba, you might be seeing the result of the code modified by IE, and IE in terms of displaying code pages is very strict as regards errors, and new code parameters that newer browsers accept.

    
05.08.2014 / 06:55
0

To use the background-image property, you must explicitly set the element size.

I believe it's best to use the button tag, in your case: 

<button class="button"></button>

.button {
    background-color: transparent;
    border: none;
    color: transparent;
    background-image: url("botao-normal.png");
    height:35px;
    width:90px;
}

.button:hover {
    background-image: url("botao-hover.png");
}

Fiddle

    
04.08.2014 / 20:59
0

Only by complementing @Berraba's response, you can also use webkit. 

.botao{
  background-image: url(http://www.naturaljoias.com.br/images/botao%20coco%202%20cm%20vermelho.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.botao:hover{
  background-image: url(http://img.mynet.com/ha2/tayyip.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  
}

.botao:active{
  background-image: url(http://www.pylones.com.br/image/cache/data/produtos/acessorios/suporte-fone-de-ouvido-botao-preto-1-600x600.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

DEMO

    
04.08.2014 / 21:03
How to generate a json file with the new news to display on my site? [closed] Regen name of columns and values of MySQL