Main image for Simple CSS for Disabled Buttons Time to Read: ~1 min

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.

Hover over the disabled button in the example below. If your browser supports CSS3, you'll see a nice indication on the cursor:

Subscribe to Wanderfull

Did you enjoy this? Did it help you? Make you laugh? Dare I say, all of the above? If you like my work — my writing, distributed work tips, or drawing, you can get more every week. Subscribe below for my weekly Substack: Wanderfull!