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


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.


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


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.


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>


#link {
  display : block;

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


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">


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

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

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


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.


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/