The smart" is not in the technology of the styling (pure CSS is smart enough) but the perceived mental micro-system behind it. What do I mean by that ? Buttons like these always pose this problem of purpose. Does the button merely serve as a signifier for an available action or does it also need to reflect the current status ? And what feedback does the button offer after clicking ?

Check marks, highlight colors, sliding switches, roll-overs – they often seem to fail to communicate a clear and unambiguous message. There always remains a need for some instructive or descriptive text (which users probably won't read).

Maybe this animation of Quora's own Notifications options helps:

So make up your mind about what the user might understand from your design of not just the button but the whole screen or panel it is part of.


Oorspronkelijk geplaatst op Quora: What's the smartest way to style a notifications button with pure CSS?"