Brian Reavis

When developing for touch devices, sometimes you need a button’s clickable area to be larger than its size (for usability’s sake). With CSS psuedo elements, there’s a way to do that without cluttering your markup or breaking your layout. Here’s the idea: place an invisible element on top of your button that’s the size of the hit area you’re looking for.

.button:before {
    position: absolute;
    display: block;
    content: ' ';
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}

The element you’re applying this to must have its positioning explicitly set (relative, absolute, fixed) otherwise the the overlay won’t be positioned correctly—it’ll be positioned relative to the ancestor that has its positioning set.

.button {
    position: relative;
}

Demo

Here it is! The red box is the pseudo element that expands the hit area: