Designing Usable and Accessible Buttons

by Chris Lorensson

HTML

<h1 id="priority">Design for Priority</h1>

<table>
  <tr>
    <td>
      <a href="#" onclick="return false;" rel="nofollow" class="b-nav">Contact us</a>
    </td>
    <td>
      <strong>Navigation</strong><br>
      Because navigation is on each page, the visual priority need not be so pronounced.
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" onclick="return false;" rel="nofollow" class="b-primary">Submit</a>
    </td>
    <td>
      <strong>Primary Button</strong><br>
      This is the button that we want users to press to advance to their desired outcome.
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" onclick="return false;" rel="nofollow" class="b-secondary">Settings</a>
    </td>
    <td>
      <strong>Secondary Button</strong><br>
      We’ve designated secondary buttons to actions.
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" onclick="return false;" rel="nofollow" class="b-tertiary">Reset</a>
    </td>
    <td>
      <strong>Tertiary Button</strong><br>
      Tertiary buttons should be lower priority than primary buttons.
    </td>
  </tr>
</table>

<h1 id="transitions">Transitions</h1>

<table>
  <tr>
    <td>
      <a href="#" onclick="return false;" rel="nofollow" class="b-nav too-short">Contact us</a>
    </td>
    <td>
      <strong>Too Short Duration</strong><br>
      The transition is too short, making it still feel jolty.
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" onclick="return false;" rel="nofollow" class="b-nav too-long">Contact us</a>
    </td>
    <td>
      <strong>Too Long Duration</strong><br>
      Because the transition takes place over too long a duration, it still feels unresponsive and it’s hard to determine whether or not any feedback has happened.
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" onclick="return false;" rel="nofollow" class="b-nav on-active">Contact us</a>
    </td>
    <td>
      <strong>Transition on :active</strong><br>
      When clicked, the transition still happens, but a user has...

SCSS

body {
  font-family: Helvetica, Arial, sans-serif;
  line-height: normal;
}

table {
  width: 90%;
  td {
    padding: 1em;
    &.c-wl-dark, &.c-wl-light {
      padding: 3em;
    }
  }
}

a.b-nav {
	transition: all 0.1s linear;
	color: #004f8c;
	text-shadow: 0 1px 0 rgba(255,255,255,.65);
	padding: 0 30px;
	height: 45px;
	line-height: 45px;
	display: inline-block;
	background-color: #e3f3ff;
	border-radius: 4px;
	box-shadow:
		0 1px 2px rgba(0,0,0,0.2),
		inset 0 -1px 0 rgba(0,0,0,0.25),
		inset 0 -45px 45px -45px #c2e5ff;
	text-decoration: none !important;
	&.too-long { transition: all 0.75s linear; }
	&.too-short { transition: all 0.03s linear; }
	&:hover {
		color: #004f8c;
		background-color: #dbefff;
		box-shadow:
			0 1px 2px rgba(0,0,0,0.25),
			inset 0 -1px 0 rgba(0,0,0,0.25),
			inset 0 -45px 45px -45px #b1dcff;
	}
	&:active {
		color: #004f8c;
		line-height: 47px !important;
		box-shadow:
			0 0 0 rgba(0,0,0,0),
			inset 0 1px 1px rgba(0,0,0,0.2),
			inset 0 45px 45px -45px #b1dcff,
			0 1px 0 rgba(255,255,255,0.5);
		background-color: #d5e9fb;
	}
}

a.b-secondary {
	font-size: 11px;
	text-transform: uppercase;
	color: #878687;
	text-shadow: 0 1px 0 rgba(255,255,255,0.65);
	padding: 0 10px 0;
	height: 27px;
	line-height: 28px;
	display: inline-block;
	background-color: #feffff;
	transition: all 0.1s linear;
	border-radius: 2px;
	box-shadow:
		0 -1px 0 rgba(0,0,0,0.15),
		inset 0 1px 0 rgba(255,255,255,0.75),
		inset 0 -1px 0 rgba(0,0,0,0.15),
		0 1px 0 rgba(255,255,255,0.2),
		inset 0 -25px 25px -25px rgba(0,0,0,0.2);
	text-decoration: none !important;
}

a.b-secondary:hover {
	color: #6b6b6c;
	background-color: #ffffff;
	box-shadow:
		0 -1px 0 rgba(0,0,0,0.15),
		inset 0 1px 0 rgba(255,255,255,0.75),
		inset 0 -1px 0 rgba(0,0,0,0.2),
		0 1px 0 rgba(255,255,255,0.3),
		inset 0 -25px 25px -25px rgba(0,0,0,0.15);
}

a.b-secondary:active {
	color: #5e5e5e;
	background-position: 6px 7px;
	line-height: 30px !important;
	background-color:...