Thompson Rivers University
Thompson Rivers University

Buttons

Regular Button

Click me
<a href="" class="button tealbg">Click me</a>

Buttons will not have a background colour by default; this is set with a colour-specific helper class. In this case, river teal is specified with 'tealbg'. See all the colour helper classes here.

Hollow Buttons

As with all buttons, you can add 'radius' to round the corners. The available colours are:

teal-hollow blue-hollow radius green-hollow
<a href="#" class="button teal-hollow">teal-hollow</a>
<a href="#" class="button blue-hollow">blue-hollow</a>
<a href="#" class="button green-hollow">green-hollow</a>
<a href="#" class="button yellow-hollow">yellow-hollow</a>
<a href="#" class="button white-hollow">white-hollow</a>

Appropriate Button Colours

Buttons should not conflict with the Call-to-Action buttons (CTAs). All pages have the primary CTAs  (yellow)  in the sticky navigation (desktop/tablet) or side navigation (mobile). Additionally, some pages will have secondary CTAs  (orange)  below the left navigation.

When choosing a colour for your buttons, be consistent. Use that colour for all buttons on that page, and if possible, your site. Where appropriate - ie: on a coloured background - choose a colour that makes sense.

The available colours are:

  • tealbg
  • bluebg
  • tealbg-dark
  • powderbg
tealbg tealbg-dark bluebg powderbg
<a href="#" class="button tealbg">tealbg</a>
<a href="#" class="button tealbg-dark">tealbg-dark</a>
<a href="#" class="button bluebg">bluebg</a>
<a href="#" class="button powderbg">powderbg</a>

Open Learning Buttons

Open Learning has a slightly different palette and so has different button options.

greenbg
<a href="#" class="button greenbg">greenbg</a>

Button Radius (Rounded corners)

Preferably, buttons should have rounded corners. Add the 'radius' class to achieve this.

Click me - with rounded corners Click me - with rounded corners
<a href="#" class="button tealbg radius">Click me - with rounded corners</a>
<a href="#" class="button greenbg radius">Click me - with rounded corners</a>

Buttons Linked to a File

When linking to a file using a button, make sure there is enough contrast so that the text is legible. To make sure there is enough contrast, only use pale grey as the button colour.

Click me Click me Click me Click me
<a href="test.pdf" class="button greybg-pale">Click me</a>
<a href="test.pdf" class="button greybg-pale">Click me</a>
<a href="test.pdf" class="button greybg-pale">Click me</a>
<a href="test.pdf" class="button greybg-pale">Click me</a>

Button Groups

Button groups can be created to cluster similar links together.

<ul class="button-group">
<li><a href="#" class="button tealbg">Link 1</a></li>
<li><a href="#" class="button tealbg">Link 2</a></li>
<li><a href="#" class="button tealbg">Link 3</a></li>
</ul>

The spaces between the buttons have been removed with the 'nomargin' class. Further, the group has been rounded with the 'radleft' and 'radright' class added to the first and last button, respectively. See all the radius helper classes here.

<ul class="button-group">
<li><a href="#" class="button nomargin tealbg radleft">Link 1</a></li>
<li><a href="#" class="button nomargin tealbg">Link 2</a></li>
<li><a href="#" class="button nomargin tealbg radright">Link 3</a></li>
</ul>

Secondary Calls-to-Action (CTAs)

Secondary Calls-to-Action are the large buttons in the left sidebar, beneath the primary section navigation. They are not to be used in-page.

CTAs must have two lines of text to align correctly.

Secondary CTAs (Main site)

<div class="secondary-cta-wrap">
<ul>
<li><a href="#" class="button orangebg radius"><strong>View all</strong><br> Programs</a></li>
<li><a href="#" class="button orangebg radius"><strong>Explore our</strong><br> Courses</a></li>
<li><a href="#" class="button orangebg radius"><strong>Admission</strong><br> Requirements</a></li>
</ul>
</div>

Secondary CTAs (Open Learning)

<div class="secondary-cta-wrap">
<ul>
<li><a href="#" class="button greenbg radius"><strong>View all</strong><br> Programs</a></li>
<li><a href="#" class="button greenbg radius"><strong>Explore our</strong><br> Courses</a></li>
<li><a href="#" class="button greenbg radius"><strong>Admission</strong><br> Requirements</a></li>
</ul>
</div>