html - 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.