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>

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>

• javascript
• html
• css

• Linking to another document is not the primary function of a button. Linking to another document is the primary function of a link. – Lightness Races in Orbit Commented Jul 11, 2011 at 11:15
• 1 Your anchor won't stretch to take up the entire div, so clicking on the background image isn't the same thing as actually clicking on the link. Also, you say you have a button, but that code just has div and a tags - no actual button. – Anthony Grist Commented Jul 11, 2011 at 11:15
• 1 And please never say "doesn't work"! Pet hate. – Lightness Races in Orbit Commented Jul 11, 2011 at 11:17

5 Answers 5

Use

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

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

The easiest (and cleanest) way is to not include that div there, just put display: block; on the link. That will make it bee a block element, so, well, behave like a div would.

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

And to the CSS:

#backbutton { display: block; width: 100px; height:100px; ... }

jsFiddle Demo

And to answer your sidequestion: for linking to another document, the right element to use is an a with its href attribute pointing to the other document. The button tag and the button variations of the input tag (button, submit, reset) are for defining actions that the user can take on the page (like submitting a form - which as a sideeffect might take you to a different page).

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

There is nothing to click on! Try:

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

Or:

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

And then add:

display:inline-block;

To the backbutton class.

You have nothing inside the a tag. Stick in a <span style="width:100%"> or something like that.

Edit: Gaby is right, this isn't a portable solution. Some other inline item, then. An invisible img?

Try to add the following CSS:

#backbutton a { width: 100%; height: 100%; margin: 0; padding: 0; }

The problem is that the <a> tag, which is the actual pushable link, doesn't have any content and therefore doesn't take up any space, so there's nowhere to click. I believe this CSS will expand it to the full size of the div#backbutton.