Improve UX by increasing the clickable area of a button with this neat trick

Ever been annoyed by tiny buttons on mobile phones? I’m sure at least once in your life you have zoomed in on a page just to click on a small button. Don’t do this to your users.

Of course you can increase the button size on small screens but it’s not always possible or the best solution. What can you do then? You can keep the button size same, but increase the clickable area. This way, the user can err by about 15px but still hit the button.

Increase the clickable area using pseudo elements

Let’s say this is your button:

The markup

CSS for styling

Now use the ::before pseudo element to overlay a transparent layer on the button, and extend it by 15px on all four sides.

Most importantly, add relative position to the button.

And now you’ve got a larger clickable area!

Try it out for yourself - Demo on Codepen

Please note:

While this is great for standalone buttons, don’t use it when you have multiple buttons next to each other. This might confuse the users.

Are you going to use this new trick you just learnt?