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

Question

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.

Answer 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)

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