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 siz

Answer 1

It's possible, however, it's a little bit cumbersome, as you need to introduce two new elements, a wrapper and a empty div (fiddle):

HTML

  
 
  I'm the button :)

CSS

/* make it possible to position the catcher */
.button-wrapper{
    position:relative;
}
/* place the button in the foreground */
.button-wrapper > button{
    position:relative;
    z-index:2;
}


/* give the catcher +1em on all sites*/
.click-catcher{
    position:absolute;
    top:-1em;
    left:-1em;
    right:-1em;
    bottom:-1em;
}

JavaScript

/** instead of getting the element by class name, you should
  * get it by ID, so you can do the right action for the right button
*/
document.getElementsByClassName("click-catcher")[0].onclick = function(){
    alert("catched!"); /** you should do something better ;) */
};

Remark

It's not possible to increase the active area of elements such as button, input, video, audio etc. beyond their shown area/controls, that's why you need additional elements. Of course it's possible to check for every click whether it was in range of a button, however this is much more complicated.