Touch Target Hack

No touch-hitbox class

Hover over each of these buttons, notice anything?

You shouldn't, these are regular buttons with a standard touch target.

With touch-hitbox class

Next, hover over each of these buttons below; which one is different? What is different?

One of these buttons has a class of touch-hitbox which makes it's touch target larger than the other buttons. If you didn't notice, hover on the outside of each button and you should see what I'm talking about.What is this class doing that allows that and why should we care?

Not clear enough? Here's a demo:

See the red border? That's the touch target. The button is the same size as the other buttons, but the touch target is larger. What is this class doing that allows that and why should we care?

What is touch-hitbox doing?

The touch-hitbox utility class creates a 44x44px invisible button behind the button you see. This ::before pseudo-element cannot be clicked, but an invisible overlay can. This meets WCAG touch target size requirements without changing button appearance.

This is incredibly useful on mobile devices where your buttons may not be large enough to meet those standards, and you don't want to ruin your design or layout.

@utility touch-hitbox {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    pointer-events: auto;
    background-color: transparent;
    z-index: 9999;
  }
}