Simple CSS for Disabled Buttons

I frequently observe discrete interface problems that, in isolation, are minor, but in aggregate, equal BIG problems. “Death by a thousand paper cuts,” you might say. I came across an update in CSS3 that gives developers more control over the cursor, which can be another tool to help communicate state or affordance to the user.

Imagine a page that contains a button that is enabled only after the user takes a specific action, like filling out required fields on a form. In this case, you can use cursor: not-allowed on the disabled button to help communicate its non-clickable state. Of course, you’ll still need to ignore the click until it is active, but when the user hovers over it, they’ll have a clear indication that it’s not (yet) interactive.