---
title: Case study of button states
date: 2020-05-18
tags: [code, html, design]
description: 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.
---

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.

<table>
	<thead>
		<tr>
			<th>toolkit</th>
			<th>normal</th>
			<th>hover</th>
			<th>focus</th>
			<th>active</th>
			<th>active+hover</th>
			<th>disabled</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th><a href="https://jdan.github.io/98.css/">win 98</a></th>
			<td><img src="98.png"></td>
			<td><img src="98-hover.png" alt="no change"></td>
			<td><img src="98-focus.png" alt="outline"></td>
			<td><img src="98-active.png" alt="inner shadow"></td>
			<td><img src="98-active.png" alt="no change"></td>
			<td><img src="98-disabled.png" alt="reduced contrast"></td>
		</tr>
		<tr>
			<th><a href="https://botoxparty.github.io/XP.css/">win XP</a></th>
			<td><img src="xp.png"></td>
			<td><img src="xp-hover.png" alt="yellow outline"></td>
			<td><img src="xp-focus.png" alt="blue outline"></td>
			<td><img src="xp-active.png" alt="darker"></td>
			<td><img src="xp-active-hover.png" alt="darker and yellow outline"></td>
			<td><img src="xp-disabled.png" alt="reduced contrast"></td>
		</tr>
		<tr>
			<th><a href="https://gitlab.gnome.org/GNOME/gtk/-/tree/master/gtk/theme/Adwaita">Adwaita</a></th>
			<td><img src="adw.png"></td>
			<td></td>
			<td><img src="adw-focus.png" alt="lighter and outline"></td>
			<td><img src="adw-active.png" alt="darker"></td>
			<td></td>
			<td><img src="adw-disabled.png" alt="reduced contrast"></td>
		</tr>
		<tr>
			<th><a href="https://primer.style/components/Buttons">github</a></th>
			<td><img src="gh.png"></td>
			<td><img src="gh-hover.png" alt="darker"></td>
			<td><img src="gh-focus.png" alt="outline"></td>
			<td><img src="gh-active.png" alt="inner shadow"></td>
			<td><img src="gh-active-hover.png" alt="no change"></td>
			<td><img src="gh-disabled.png" alt="reduced contrast"></td>
		</tr>
		<tr>
			<th><a href="https://getbootstrap.com/docs/4.5/components/buttons/">bootstrap</a></th>
			<td><img src="bs.png"></td>
			<td><img src="bs-hover.png" alt="darker"></td>
			<td><img src="bs-focus.png" alt="darker and outline"></td>
			<td><img src="bs-active.png" alt="even darker"></td>
			<td><img src="bs-active-hover.png" alt="no change"></td>
			<td><img src="bs-disabled.png" alt="reduced contrast"></td>
		</tr>
		<tr>
			<th><a href="https://materializecss.com/buttons.html">materialize</a></th>
			<td><img src="mat.png"></td>
			<td><img src="mat-hover.png" alt="lighter"></td>
			<td><img src="mat-focus.png" alt="darker"></td>
			<td></td>
			<td></td>
			<td><img src="mat-disabled.png" alt="reduced contrast"></td>
		</tr>
	</tbody>
</table>

<dl>
	<dt>hover</dt>
	<dd>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.</dd>

	<dt>focus</dt>
	<dd>Typically an outline. This way it can easily be combined with other states. Browsers have default styling for this</dd>

	<dt>active</dt>
	<dd>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.</dd>

	<dt>disabled</dt>
	<dd>Typically reduced contrast. Disabled buttons typically ignore the other states.</dd>
</dl>

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.