Make the Whole Button Clickable, Not Just the Text

Maybe this is simply a pet hate of mine, but I see it often enough to mention it here. Buttons often feature text and sometimes developers only make the text clickable, not the whole button. Meaning that, if you’re a couple of pixels out and miss the text (but hit the button)... nothing happens.

We’re all familiar with thinking, “Did I not click that?” and often this is the cause. If you’re imitating the real-world behavior of a button, then make it behave like a real button. This includes giving the user some feedback that the button has been successfully clicked (or tapped). This could be with a change of shade, a slight 1-pixel-movement “down” or a subtle audio effect.

All interactive elements should have default, active, hover, and disabled states, with subtle visual differences so the user can infer their interaction state with that control.

You get bonus...