Ever struggled to tap a tiny button on your phone? It’s a common frustration, especially with icon-only buttons like expand/collapse controls. While these minimal buttons look clean, they can be tricky to interact with. Let me show you a simple CSS technique to increase the clickable area without altering the button’s visual appearance:
button.btn {
position: relative;
cursor: pointer;
display: inline-block;
}
/* Solution - Expand the clickable area */
button.btn::after {
content: '';
position: absolute;
inset-block: -10px;
inset-inline: -10px;
}
We add position:relative
to the button so that the absolute-positioned pseudo ::after
element uses it as a referent point. If you want to avoid using pseudo elements, you can just nest a span
inside the button
and apply the same CSS rules to it.
Here is the result: