We use cookies to enhance your experience on our website. By continuing to use our website, you are agreeing to our use of cookies. You can change your cookie settings at any time. Find out more

Buttons

Don’t hard code any special characters within the buttons such as >. They can be problematic with screen readers.

Standard buttons

When using multiple buttons in close proximity use the secondary button. The primary button is a call to action and too many call to actions can be confusing.

Primary button Secondary button

  <a href="/" class="btn btn-primary">Primary button</a> <a href="/" class="btn btn-secondary">Secondary button</a>

XL buttons

Primary button Secondary button

  <a href="/" class="btn btn-primary btn-xl">Primary button</a> <a href="/" class="btn btn-secondary btn-xl">Secondary button</a>

Icon buttons

Amazon

Buy on Amazon
Buy on Amazon
Buy on Amazon
Buy on Amazon

  <a href="https://www.amazon.co.uk/gp/product/0192749544/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1634&creative=6738&creativeASIN=0192749544&linkCode=as2&tag=oxfowl-21" class="btn btn-primary btn-icon--before btn-amazon">Buy on Amazon</a>
  <a href="https://www.amazon.co.uk/gp/product/0192749544/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1634&creative=6738&creativeASIN=0192749544&linkCode=as2&tag=oxfowl-21" class="btn btn-primary btn-xl btn-icon--before btn-amazon">Buy on Amazon</a>
  <a href="https://www.amazon.co.uk/gp/product/0192749544/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1634&creative=6738&creativeASIN=0192749544&linkCode=as2&tag=oxfowl-21" class="btn btn-secondary btn-icon--before btn-amazon">Buy on Amazon</a>
  <a href="https://www.amazon.co.uk/gp/product/0192749544/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1634&creative=6738&creativeASIN=0192749544&linkCode=as2&tag=oxfowl-21" class="btn btn-secondary btn-xl btn-icon--before btn-amazon">Buy on Amazon</a>
  

Print

Shouldn’t be pink

Print this page
Print this page

  <a href="javascript:window.print()" class="btn btn-secondary btn-icon--before btn-print">Print this page</a>
  <a href="javascript:window.print()" class="btn btn-secondary btn-xl btn-icon--before btn-print">Print this page</a>
  

Tag buttons