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

Asked

Viewed 25,953 times

2

I can not put an effect on a button, I have 3 images made in photoshop, one that is Normal (Link), another when you pass the mouse (Hover), and one when you 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');

}

Imagery: NORMAL HOVER Actived

I haven’t done the 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 run Chrome and Firefox and ran, my problem is that IE does not work, and in the company they use IE8.

html css link

  • You are using the same images, you won’t be able to see the effect. Also, it is necessary to define the properties height and width to use the background-image.

  • Thousand excuses, I copied wrong, the <input type="image" src="Blue Button Hover-OK.png" class="boot"> is <input type="image" src="Blue Button Normal- OK.png" class="boot">, I put wrong here, but the error persisted... my inattention, I will correct

  • NOTE: I wanted to do everything in CSS, I wanted HTML only for "structure", until Normal Background(Link) was in it...

  • Please prefer [Edit] to ask to correct or add information. Do not forget to give feedbak to the answers given, updating the question if necessary. And, final tip: it is not worth converting the question into something else, if the problem becomes another, make a new question. Good luck!

5 answers

3

You can achieve the desired 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 at Jsfiddle

Additional information: You can find on this page the reason why it is preferable to use <input> instead of <button>, possibly that’s why you weren’t succeeding with the code suggested by @beetroot, you could be seeing the result of the code modified by IE, and IE in terms of displaying code pages is very strict when it comes to errors and new code parameters that newer browsers accept.

3

You must use type="Submit" to style with css. Using type="image" Voce needs "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;
}

1


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

<!DOCTYPE html>

  • put what on after all?

  • It was bad, I didn’t see you didn’t show up.

  • OK so I can already notice I changed the down to up :)

0

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

I think it’s best to use the tag button, 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

  • Perfect placement! However, only the . button works, the:Hover button does not work... I put as posted, of course changing the class and URL

  • 1

    @Vinithius doesn’t work with the input because of the src="...". Take it out that works.

  • I’m using like you did, <button class="button"></button> but HOVER won’t take!

  • @Vinithius then is likely that your CSS is not finding the path to the image, or the name is incorrect.

  • I appreciate your help, but the way is right, the image is in the same folder as Index.html, simply not to have error, but it was not my case...

  • The user @Beet is right: the image in "src" is above the background which therefore will not be seen. My question is whether the absence of the image is accepted in the validation of an input type=image.

Show 1 more comment

0

Just by complementing the @Beet 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

Browser other questions tagged html css link

You are not signed in. Login or sign up in order to post.