Expand the clickable area of a button without changing its UI

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:

Codepen link.