CSS Simplified

Share this post

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

shrutibalasa.substack.com

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

Shruti Balasa
Feb 16
8
Share this post

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

shrutibalasa.substack.com

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.

Thanks for reading CSS Simplified! Subscribe for free to receive new posts and support my work.

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?

Thanks for reading CSS Simplified! Subscribe for free to receive new posts and support my work.

Share this post

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

shrutibalasa.substack.com
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 Shruti Balasa
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing