Buttons

Use these button styles for actions in forms, dialogs, and more with support for multiple sizes, states etc.

You can have several button colours.  This can be set by adding the relevant class e.g. for a primary button the class would be 'btn btn-primary'.

Uni Teal Uni Blue Uni Magenta Bootstrap Light Bootstrap Link

<button class="btn btn-primary" type="button">Uni Teal</button>
<button class="btn btn-secondary" type="button">Uni Blue</button>
<button class="btn btn-accent-primary" type="button">Uni Magenta</button>
<button class="btn btn-light" type="button">Bootstrap Light</button>
<button class="btn btn-link" type="button">Bootstrap Link</button>

Button Tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

Link Button

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input" />
<input class="btn btn-primary" type="submit" value="Submit" />
<input class="btn btn-primary" type="reset" value="Reset" />

Outline buttons

You may want to use these if you don't want to show the background colour of the button. The background colour will shown on hovering over the button.

Uni Teal Uni Blue Uni Magenta Bootstrap Light

<button class="btn btn-outline-primary" type="button">Uni Teal</button>
<button class="btn btn-outline-secondary" type="button">Uni Blue</button>
<button class="btn btn-outline-accent-primary" type="button">Uni Magenta</button>
<button class="btn btn-outline-light" type="button">Bootstrap Light</button>

Button Sizes

If you'd like larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

Large button Large button

<button class="btn btn-primary btn-lg" type="button">Large Button</button>
<button class="btn btn-secondary btn-lg" type="button">Large Button</button>

Small button Small button

<button class="btn btn-primary btn-sm" type="button">Small Button</button>
<button class="btn btn-secondary btn-sm" type="button">Small Button</button>