increasing clickable area of a button

Question

not looking for any actual code just a point in the right direction with this one.

Is there anyway to increase the target area of a button but not increase it's size? for instance could i effectively add a 5-10px area around the button that will still count as clicking the button.

All of the methods i have seen increase the actual size of button which i do not want to do as this would push other elements out of place. My only other thinking is to have a listener for any clicks that can determine the closest clickable element and if it's within 5-10px have it fire.

Answer 1

You could add a pseudo-element (:after / :before), but be careful as two nearby links might overlap this way ..

<a href="your-link-here" class="big-link">some link text</a>

and

a.big-link{position:relative;}
a.big-link:before{
    position:absolute;
    content:'';
    top:-10px;
    right:-10px;
    left:-10px;
    bottom:-10px;
}

Demo :

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

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

This is some text <a href="#">with a link</a> and <br> other stuff to check if they get pushed around<br> by the size of the link.

Answer 2

I wouldn't recommend trying to increase the clickable area of a button. If the button is too small, you should probably increase the size of the button as a whole. Touch devices are very good at helping users click even very small buttons.

However, if you have a use case for this where it makes sense then you could:

1) place the button inside a div with a padding of 5-10px, and then assign a click handler to the div that in turn triggers the click handler on the button it contains.

or a tidier solution - if you can change your current button style and click logic:

2) give the button a style with no background or border and 5-10px padding then create a div inside it styled like the original button.

Either way, a containing element with padding is what you'll want to work with.