Close

Buttons

The default button should be used for basic calls to action on our 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 webpages.

Note: This is available as a widget when editing pages.

Apply through UCAS
Apply through UCAS
Apply through UCAS
How to apply
How to apply
How to apply 
<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.

January starts Work placements Careers Going on exchange International students Second and Final Year entry Open Days 

<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

Email Calendar Google Student information 

<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 that 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.

If you have any questions or suggestions for improvements, please contact the Web Team.