Need to make a clickable
button

Question

Kindly go through this link and notice the solution given by "thepeer": https://stackoverflow.com/a/3494108

I am having trouble understanding his solution. Let me illustrate with the example of a webpage that I am trying to build. I am using HTML5 to build "buttons". Now since these buttons are actually DIV objects, I somehow need to make them "clickable" which would lead the viewer to another page, and that too, without making the "link" visible. The div object should act as a button and I don't intend to "include" a hypertext-ed line of text inside the button.

I think the solution given by "thepeer" does exactly that but i am unable to understand his solution and implement it. Perhaps a very small example would benefit me.

Suppose this is the button that i want to make :

<div id="music" class="nav">
    Music I Like 
    <span id="hyperspan"><a href="Music.html"></a></span>
</div>

And here's the CSS as "thepeer" suggested :

.hyperspan
{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:1;
}

Now, obviously, I misunderstood his solution and hence my above attempt is incorrect. I don't want to resort to javascript so please help me! Sorry for my noobish-ness.

thepeer's solution is a trick to make an element "expand" to the whole div it's in, without covering the rest of the content of the div. But I believe you don't want an element, right? If you really want a button, why not use a — Mr Lister, Dec 28 '11 at 19:16
@MrLister Because I think the idea was no code, just a link. — ThinkingStiff, Dec 28 '11 at 19:45

mrtsherman · Accepted Answer · 2011-12-28T19:24:14.380

35

There are two solutions posted on that page. The one with lower votes I would recommend if possible.

If you are using HTML5 then it is perfectly valid to put a div inside of a. As long as the div doesn't also contain some other specific elements like other link tags.

<a href="Music.html">
  <div id="music" class="nav">
    Music I Like
  </div>
</a>

The solution you are confused about actually makes the link as big as its container div. To make it work in your example you just need to add position: relative to your div. You also have a small syntax error which is that you have given the span a class instead of an id. You also need to put your span inside the link because that is what the user is clicking on. I don't think you need the z-index at all from that example.

div { position: relative; }
.hyperspan {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
}

<div id="music" class="nav">Music I Like 
    <a href="http://www.google.com"> 
        <span class="hyperspan"></span>
    </a>   
</div>

http://jsfiddle.net/rBKXM/9

When you give absolute positioning to an element it bases its location and size after the first parent it finds that is relatively positioned. If none, then it uses the document. By adding relative to the parent div you tell the span to only be as big as that.

edited Dec 28 '11 at 19:24

answered Dec 28 '11 at 19:13

mrtsherman

39,342
23
87
111

Thank you for your quick response. http://jsfiddle.net/rBKXM/2/ I tried editing the hyperlink to "www.google.com" but it still remains "unclickable". Why is that? – finitenessofinfinity Dec 28 '11 at 19:20
Woops, didn't see that problem. The span needs to be inside the link because that is what you are clicking on! – mrtsherman Dec 28 '11 at 19:23
Exactly What I had wanted! Thank you so much mrtsherman! I hope you have a great day! How do you thank people here? :D – finitenessofinfinity Dec 28 '11 at 19:25
Just a comment that says thank-you is great. Make sure you accept the answer by ticking the checkmark. If you like SO make sure you read the FAQ and help some other people out too! http://stackoverflow.com/faq – mrtsherman Dec 28 '11 at 19:27
And I still don't understand why you can't use a – Mr Lister Dec 28 '11 at 19:31
@MrLister But isn't using the – finitenessofinfinity Dec 28 '11 at 19:45

ThinkingStiff · Answer 2 · 2013-05-31T21:37:21.167

29

Just use an <a> by itself, set it to display: block; and set width and height. Get rid of the <span> and <div>. This is the semantic way to do it. There is no need to wrap things in <divs> (or any element) for layout. That is what CSS is for.

Demo: http://jsfiddle.net/ThinkingStiff/89Enq/

HTML:

<a id="music" href="Music.html">Music I Like</a>

CSS:

#music {
    background-color: black;
    color: white;
    display: block;
    height: 40px;
    line-height: 40px;
    text-decoration: none;
    width: 100px;
    text-align: center;
}

Output:

enter image description here

edited May 31 '13 at 21:37

answered Dec 28 '11 at 19:32

ThinkingStiff

64,767
30
146
239

Your solution is perfect! Thank you! The only reason I was using
tag to achieve this result was because I wanted to animate and transform using CSS3, the div object. But as I just tried, it works just as well on your solution! Amazing! I'd choose your solution as best but I guess my original question could seem a bit misleading to many answerers as it suggests that i want a solution which caters to divs. But of course, for my own purpose, your solution is perfect. Thanks!
– finitenessofinfinity Dec 28 '11 at 19:52
1

You can accept whatever answer you feel solves your problem best and you can edit your question with new information. You can also upvote as many answers as you find helpful. Glad it worked for you. – ThinkingStiff Dec 28 '11 at 19:56
but then how do you do tricks like making the whole screen a button – Fight Fire With Fire Mar 02 '16 at 16:01

Need to make a clickable button

2 Answers2

Need to make a clickable
button