How to increase the clickable area of 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.

score 206 · Answer 1 · edited Nov 10 '22 at 14:25

206

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

<a href="">An anchor element</a>

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)

edited Nov 10 '22 at 14:25

isherwood

58,414
16
114
157

answered Dec 02 '13 at 11:54

t1m0thy

2,688
3
14
14

12

this is the real answer on *how to increase clickable area of a tag button* – StefansArya Mar 12 '17 at 09:05
1

This was the first recipe I've found that worked with an icon next to it, thanks. However I had to change: `padding: 0 2em; margin: 0 -2em;` to prevent the clickable area from being pushed down. – Gringo Suave Jul 27 '17 at 18:56
3

I also needed to set `box-sizing: content-box` which was reset to `border-box` by bootstrap – Cyril Durand Jan 09 '19 at 18:21
This is a negative margin in all 4 directions? – PJ Brunet Apr 25 '19 at 20:37
The z-index does not seem to be necessary in Chrome? Maybe in other browsers? – Protector one Dec 14 '20 at 14:38
worked like a charm. z-index is necessary for making it browser compatible. – Aditya Patnaik May 10 '22 at 09:25

score 63 · Accepted Answer · edited Nov 10 '22 at 14:24

63

@t1m0thy's answer is more elegant than mine. It's better to follow his advice.

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

edited Nov 10 '22 at 14:24

isherwood

58,414
16
114
157

answered Jun 18 '12 at 07:30

sp00m

47,968
31
142
252

2

This works perfectly, and your answer came in light speed. Your rock! Thank you so much. – Ivan Wang Jun 18 '12 at 08:05
If you worry about semantics,t1m0thy's answer seems to be the right choice. See: https://davidwalsh.name/html5-buttons – aldemarcalazans Aug 28 '17 at 19:38
Facebook also uses this approach to expand the tap target of the links in the navigation for their mobile web app. I prefer this approach, much more readable IMO. "// make tap target of link bigger" – Clifford Fajardo Jul 23 '18 at 18:32
Remember to make `display:block` both the container of the `` and also the ``. Then you should use `padding` for the ``, not for the container of the ``. – Jaime Montoya Apr 29 '20 at 11:18

score 22 · Answer 3 · edited Nov 10 '22 at 14:26

22

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:

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

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

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

edited Nov 10 '22 at 14:26

isherwood

58,414
16
114
157

answered Jun 18 '12 at 07:29

Sarfraz

377,238
77
533
578

Inc33 · Answer 4 · 2023-01-12T06:37:09.167

14

For me the padding solution wasn't good, as I was using border on the button, and would've been hard to modify the markup to create an overlay for the touch area.

So I just used the :before pseudo element and created an overlay, which was perfect in my case, as the click event propagated the same way.

button.my-button:before {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  top: -6px;
  left: -5px;
  cursor: pointer;
}

<button class="my-button">A button</button>

Note: Make sure you have position:relative on the parent element.

edited Jan 12 '23 at 06:37

answered Feb 26 '20 at 07:39

Inc33

1,747
1
20
26

1

This is the best solution, deserves the check. You can also add `z-index` in case anything overlaps the touch area – Arthur Khazbs Feb 11 '22 at 22:09
1

This answer worked for me. However I had to add `position: relative;` to the parent element, otherwise the `::before` pseudo element would change position as by layout would move (there are animations on the page). – jimasun Jan 11 '23 at 09:15
Yes, that is expacted behavior. I added a note to my answer. – Inc33 Jan 12 '23 at 06:37
or you just set the width and height to 100%. worked for me. thanks! button.my-button:before { content: ''; position: absolute; width: 100%; height: 100%; } and the .button should be position: relative – Sam Apr 17 '23 at 17:32

score 10 · Answer 5 · answered Jun 18 '12 at 07:31

10

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

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

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

answered Jun 18 '12 at 07:31

Christian

19,605
3
54
70

score 9 · Answer 6 · answered Jun 18 '12 at 07:29

9

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>

answered Jun 18 '12 at 07:29

Alex

9,313
1
39
44

score 9 · Answer 7 · answered May 07 '14 at 06:56

9

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.

answered May 07 '14 at 06:56

Ramesh

392
1
12
39

score 4 · Answer 8 · answered Jun 18 '12 at 07:34

4

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/

answered Jun 18 '12 at 07:34

DZittersteyn

628
3
8

score 3 · Answer 9 · edited Nov 10 '22 at 14:29

3

Provide more left,Bottom,right and top space. This will have more clickable/touchable area of anchor tag for easy click...

Remember: this may have negative effects as well

a {
  text-decoration: none;
  font-size: 12px;
  min-width: 10px !important;
  padding: 0px 1px !important;
  margin-right: 3px;
  position: relative;
  z-index: 50;
}

a:before {
  position: absolute;
  content: '';
  top: -10px;
  right: -10px;
  left: -10px;
  bottom: -10px;
  z-index: 40;
}

<a href="">An anchor</a>

edited Nov 10 '22 at 14:29

isherwood

58,414
16
114
157

answered May 24 '22 at 01:03

Zia Khan

188
2
9

1

Wow! This is amazing! Thanks :) – Renan Coelho Jun 22 '23 at 16:43

score 0 · Answer 10 · answered Jun 19 '19 at 11:43

use position css property and set top,right,bottom and left to Zero.. set z-index if needed in my case in i used text-indent because i dont want to show link "text" but if you want to show link "text" , just don't use text-indent

display:block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px;

score 0 · Answer 11 · answered Jun 11 '20 at 05:04

Big thanks to the contributors to the answers here, it pointed me in the right direction.

For the Bootstrap4 users out there, this worked for me. Sets the a link (tap target) to correct size to pass the Lighthouse Site Audit on mobiles.

    <span class="small">
         <a class="d-inline position-relative p-3 m-n3" style="z-index: 1;" href="/AdvancedSearch" title="Advanced Site Search using extra optional filters">Advanced Site Search</a>
    </span>

score 0 · Answer 12 · answered Aug 13 '20 at 15:14

0

the simple way I found out: add a "li" tag on the right side of an "a" tag List item

<li></span><a><span id="expand1"></span></a></li>

On CSS file create this below:

#expand1 {
 padding-left: 40px;
}

answered Aug 13 '20 at 15:14

Reinaldo Holanda

1

jimasun · Answer 13 · 2023-01-11T10:37:19.547

The cleanest solution I've found is using ::before as I didn't wanted to alter and potentially complicate the HTML. Here is an example:

    // the parent element
    .chevron {
        position: relative;
        width: 36px;
        height: 36px;
        border-radius: 18px;
        cursor: pointer;
    }
    
    // the background covers only 36px as of the parent
    .chevron:hover {
        background: #F1FBFE;
    }
    
    // the invisible "touch area"
    .chevron::before {
        position: absolute;
        width: 48px;
        height: 48px;
        top: -6px; // half of parent's height
        content: '';
    }

Other properties such as left, cursor, z-index are not necessary. Specifically cursor is inherited from the parent as the pseudo-element lays under the parent (even though stretches further).

Bellow image show how the mouse has not yet entered the parent element but it will still trigger :hover (adding background) and cursor: pointer.

Note: I haven't tested this for selectable contents.

score 0 · Answer 14 · answered Mar 22 '23 at 16:15

This also work to increase anchor tag clickable area which is stated by Fitts's Law: The Importance of Size and Distance in UI Design

a {
  position: relative;
  z-index: 50;
}

a:before {
  position: absolute;
  content: '';
  top: -10px;
  right: -10px;
  left: -10px;
  bottom: -10px;
  z-index: 40;
}
a:active{
  outline: 2px solid red;
}

score 0 · Answer 15 · answered Apr 17 '23 at 17:35

0

so if you have class button you can do the following:

.button {
        position: relative;
    }
    
    .button::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
    }

answered Apr 17 '23 at 17:35

Sam

291
3
17

How to increase the clickable area of a tag button?

15 Answers15

Linked

Related