Ξ

Case study of button states

Published on 2020-05-18 code html design

I still don't really have a good idea about how to style different button states. So I did a quick comparison of some toolkits from different eras.

toolkit normal hover focus active active+hover disabled
win 98 no change outline inner shadow no change reduced contrast
win XP yellow outline blue outline darker darker and yellow outline reduced contrast
Adwaita lighter and outline darker reduced contrast
github darker outline inner shadow no change reduced contrast
bootstrap darker darker and outline even darker no change reduced contrast
materialize lighter darker reduced contrast
hover
Typically a slight color variation. Win 98 is interesting because it has no hover styling at all. Win XP is interesting because it uses an outline which is otherwise mostly used for focus.
focus
Typically an outline. This way it can easily be combined with other states. Browsers have default styling for this
active
Typically a 3D effect like shadows or gradients (or the lack thereof). Flat designs like that of bootstrap or materialize struggle to differentiate this from other states.
disabled
Typically reduced contrast. Disabled buttons typically ignore the other states.

So in summary: Focus and disabled are pretty much set in stone. Active should be clearly distinguishable. In comparison, hover styles are way less relevant and should only be slight variations.