Hit Area and Target Size

#min-height / paddingfitts-law

Use min-height, padding, and gap so targets are easy to acquire; touch-friendly and accessible.

Why it works: Fitts's Law — time to acquire a target depends on size and distance; larger hit areas and clear spacing reduce errors and effort.

live_demo

code

.fitts-btn.good {
  padding: 16px 28px;
  min-height: 48px;
  min-width: 120px;
  transition: background 0.2s, border-color 0.2s;
}

.fitts-btn.bad {
  padding: 6px 12px;
  font-size: 14px;
}