Entry 04

Hit area larger than the visual

Use it on icon buttons, close buttons and any target that looks smaller than 44px.

Click inside the dashed square but outside the small button. The count goes up. The square is 44px, and the large button has none.

Code CSS · 7 lines

.icon-button { position: relative; }

.icon-button::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - 44px) / 2);
}

Why it works, the rules and the credits 2 reasons · 2 rules · support · credits

The pseudo-element belongs to the button, so a click on it hits the button.
The negative inset grows the area to exactly 44px. min(0px, …) leaves larger targets alone.

overflow: hidden or clip on the button cuts the area off.
It does not work on <input>, which has no pseudo-elements. Wrap it in a <label>.

Borrowed from: Emil Kowalski, Agents with Taste, for the rule · Vercel Web Interface Guidelines. The inset formula was written for this list.