Buttons

Regular Button

<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:

<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

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

No icon

button tealbg nobg

Open Learning Buttons

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

<a href="#" class="button greenbg">greenbg</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.

<a href="test.pdf" class="button greybg-pale">Click me</a>
<a href="test.doc" class="button greybg-pale">Click me</a>
<a href="test.xslx" class="button greybg-pale">Click me</a>
<a href="mailto:test@tru.ca" class="button greybg-pale">Click me</a>

Button Groups

Button groups can be created to cluster similar links together.

• Link 1
• Link 2
• Link 3

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

• Link 1
• Link 2
• Link 3

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

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

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

Buttons with Icons

To use a button with an icon use the "navBox" and "navItems" classes.

• 
  Campus Tours

<ul class="large-block-grid-3 small-block-grid-1">
 	<li>
 		<div class="navBox bluebg-st">
 			<h3 class="navItems">
 				<a href="#" class="whitetext">
 					<i class="fas fa-university"></i>
 						<br/>Campus Tours
 				</a>
 			</h3>
 		</div>
 	</li>
 </ul>