1. Design System
  2. Base
  3. Buttons

Buttons

The default button should be used for basic call to actions within the website.

Call to action buttons

The classes for blue buttons obbs-blue, obbs-blue-secondary or obbs-text-link should only be used on the Oxford Brookes Business School pages.

<div class="columns">
	<div class="column is-4">
		<a class="button brookes-primary" href="#">Apply through UCAS</a>
	</div>
	<div class="column is-4">
		<a class="button brookes-secondary" href="#">Apply through UCAS</a>
	</div>
	<div class="column is-4">
		<a class="text-link" href="#">Apply through UCAS<span class="text-link-icon fa fa-arrow-right" aria-hidden="true"></span></a>
	</div>
</div>
<div class="columns">
	<div class="column">
		<a class="button obbs-blue" href="#">How to apply</a>
	</div>
	<div class="column">
		<a class="button obbs-blue-secondary" href="#">How to apply</a>
	</div>
	<div class="column">
		<a class="obbs-text-link" href="#">How to apply<span class="text-link-icon fa fa-arrow-right" aria-hidden="true"></span></a>
	</div>
</div>

Inline buttons

The buttons class can be used to inline a group of buttons

<p class="buttons">
	<a class="button brookes-secondary" href="#">January starts</a>
	<a class="button brookes-secondary" href="#">Work placements</a>
	<a class="button brookes-secondary" href="#">Careers</a>
	<a class="button brookes-secondary" href="#">Going on exchange</a>
	<a class="button brookes-secondary" href="#">International students</a>
	<a class="button brookes-secondary" href="#">Second and Final Year entry</a>
	<a class="button brookes-primary" href="#">Open Days</a>
</p>

Buttons with icons

<p class="buttons">
	<a class="button brookes-primary m-bottom-10" href="#">
		<span class="icon">
			<span class="fa fa-envelope" aria-hidden="true"></span>
		</span>
		<span>Email</span>
	</a> 
	<a class="button brookes-primary m-bottom-10" href="#">
		<span class="icon">
			<span class="fa fa-calendar-alt" aria-hidden="true"></span>
		</span>
		<span>Calendar</span>
	</a> 
	<a class="button brookes-primary m-bottom-10" href="#">
		<span class="icon">
			<span class="fab fa-google-drive" aria-hidden="true"></span>
		</span>
		<span>Google</span>
	</a>
	<a class="button brookes-primary m-bottom-10" href="#">
		<span class="icon">
			<span class="fa fa-user-graduate" aria-hidden="true"></span>
		</span> 
		<span>Student information</span>
	</a>
</p>

Usage

The button class can be used on:

  • <a> anchor links
  • <button> form buttons
  • <input type="submit"> inputs

The buttons class can be used to inline a group of buttons

Accessibility

  • Buttons should display a visible focus state when users tab to them.
  • Avoid using <div> or <img> tags to create buttons. Screen readers don't automatically know either is a usable button.
  • When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.