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

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.

Answer 2

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 at http://jsfiddle.net/kq8pq/2/

Answer 3

Simply apply a border on the button that is the same color as your background. This will give the effect of enlarging the button's size, but still appearing as just the size you made it.

Answer 4

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

<div class="button-wrapper">
  <div class="click-catcher"></div> <!-- this will be styled with CSS -->
  <button>I'm the button :)</button>
</div>

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.