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

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

Posted by: admin November 29, 2017 Leave a comment

Questions:

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.

Answers:

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

Questions:
Answers:

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; 
}

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). Display: inline-block is required so that margins and padding can be set and 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.

Questions:
Answers:

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.

Questions:
Answers:

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>

Questions:
Answers:

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

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

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

Questions:
Answers:

add padding to the CSS class of anchor tag. If required, add padding-top, padding-bottom,… individually according to the clickable area you want. It worked for me.

Questions:
Answers:

You might try using display: block or display: inline-block. A nice tutorial can be found here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/