Touch interactions

Touch targets and hit area

A finger is 40-50px wide. Touch targets should be at least 44x44px (Apple) to 48x48px (Android) to be easily tappable. Provide spacing between targets to prevent misclicks.

Touch-friendly button sizing

Buttons should be large and well-spaced on mobile.

button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 20px;
  font-size: 16px; /* Prevents zoom on iOS */
  border: none;
  cursor: pointer;
}

button + button {
  margin-left: 8px; /* Space between buttons */
}

Avoid hover-only interactions

Touch devices have no :hover. Use :focus and :active instead. A tooltip that only appears on hover is invisible on mobile — use a tap to reveal, or show tooltips by default.

Avoiding hover-only patterns

Use :focus-visible and :active instead for touch devices.

button { padding: 12px 20px; }
button:hover { background: #0066cc; }
button:focus-visible { outline: 2px solid blue; }
button:active { transform: scale(0.98); }

Quick check: What's wrong with hover-only tooltips on mobile?

• They're invisible on touch screens
• They slow down the page
• They're too large