How to increase the clickable area of a <a> tag button?

I have learnt from this post that always use <a> tags or <button> tags to make button. Now I'm trying to use <a> tag. My question is: is there any way to increase the tag clickable area? Say I'm using <a> in a div box. I want the whole div box to become a button. Can I change the clicking area to the whole div box? Thanks for you help.

Solution 1:

To increase the area of a text link you can use the following css;

a {     
   display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding: 2em;     
   margin: -2em; 
}

Display: inline-block is required so that margins and padding can be set
Position needs to be relative so that...
z-index can be used to make the clickable area stay on top of any text that follows.
The padding increases the area that can be clicked
The negative margin keeps the flow of surrounding text as it should be (beware of over lapping links)

Solution 2:

Edit:

@t1m0thy's answer is more elegant than mine, better follow his advices.

Also, nice link proposed by @aldemarcalazans in the comments: https://davidwalsh.name/html5-buttons.

Original answer:

Use <a /> when you need a link (the a of anchor). Use <button /> when you need a button.

That said, if you really need to expand an <a />, add the CSS attribute display: block; on it. You'll then be able to specify a width and/or a height (i.e. as if it were a <div />).

Solution 3:

Yes you can if you are using HTML5, this code is valid not otherwise:

<a href="#foo"><div>.......</div></a>

If you are not using HTML5, you can make your link block:

<a href="#foo" id="link">Click Here</a>

CSS:

#link {
  display : block;
  width:100px;
  height:40px;
}

Notice that you can apply width, height only after making your link block level element.

Solution 4:

Just make the anchor display: block and width/height: 100%. Eg:

.button a {
    display: block;
    width: 100%;
    height: 100%;
}

jsFiddle: http://jsfiddle.net/4mHTa/

Solution 5:

If you're using HTML 5, i.e. the doctype

<!doctype html>

then you can just use block-level links.

<a href="google.com">
  <div class="hello">
    ..
  </div>
</a>