Question

I have a button with three states (three different images) and it works and looks great except the primary function of a button – link to other document:)

When it’s clicked, nothing happens. Do I need to use javascript or <input> or <button>?

I’ve tried it with <button> tag, but that three states didn’t work.

And <a id="backbutton">… doesn’t work either.

#backbutton{ width: 100px; height:100px; background-image: url('../obrazky/fs/back_up100.png'); }
#backbutton:hover{ background-image: url('../obrazky/fs/back_hover100.png'); }
#backbutton:active{ background-image: url('../obrazky/fs/back_down100.png'); }


<div id="backbutton"><a href="index.html"></a></div>

Answer 1

Use

#backbutton a{display:block;width:100%;height:100%;}

to make the link inside the div to fit its container..