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

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)

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 />).

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.