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.

Tanny

Answer 1

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

Rosalba

This works perfectly, and your answer came in light speed. Your rock! Thank you so much. – Tanny

If you worry about semantics,t1m0thy's answer seems to be the right choice. See: davidwalsh.name/html5-buttons – Retrospective

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

Remember to make display:block both the container of the <a /> and also the <a />. Then you should use padding for the <a />, not for the container of the <a />. – Leid

Probably going to upset a lot of developers here, but need to add that a lot of devs are limited by their comps and cannot make this change. A <button> needs to LOOK like a button in the UI if you use <button>, just as <a> needs to look like a link under WCAG. Aside from Structure, Contrast, and Touch Area, this is the most common accessibility UI mis-implementation. So please either ask for a design change, or find a more correct way for your comps. (I know navbars are sort of weird, but in general, I mean.) – Historiated

Answer 2

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)

Afforest

this is the real answer on how to increase clickable area of a tag button – Complaisant

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. – Cutthroat

I also needed to set box-sizing: content-box which was reset to border-box by bootstrap – Angers

This is a negative margin in all 4 directions? – Parachute

The z-index does not seem to be necessary in Chrome? Maybe in other browsers? – Jupiter

worked like a charm. z-index is necessary for making it browser compatible. – Rowlock

Answer 3

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.

Spare

Answer 4

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.

Reprint

This is the best solution, deserves the check. You can also add z-index in case anything overlaps the touch area – Defilade

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). – Skipper

Yes, that is expacted behavior. I added a note to my answer. – Reprint

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 – Cabbagehead

Answer 5

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

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

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

Samovar

Answer 6

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.

Consentaneous

Answer 7

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>

Svetlana

Answer 8

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/

Pieplant

Answer 9

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>

Individualize

Answer 10

Use the CSS position property and set top, right, bottom and left to 0. Set z-index if needed.

In my case, I used text-indent because I don’t 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;

Ewall

Answer 11

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>

Star

Answer 12

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

Obligation

Answer 13

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.

Skipper

Answer 14

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

Individualize

Answer 15

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

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

Cabbagehead

Answer 16

If you have a situation where adding extra padding is problematic, try this:

a { 
  display: inline-block;
  position: relative:
  z-index: 1;
  width: 100%;
}

Consociate