Capsule buttons

Capsule buttons are usually used for tasks and specific functions, but they're more flexible.

Capsule button example

When to use capsule buttons

  • Links and calls to action below your left hand navigation (example: Child and Youth Care).
  • Important choices like "view undergraduate programs" vs "view graduate programs" on the page content. (example: Giving to UVic)
  • These buttons are usually used as search and submit buttons in forms.

Guidelines on using capsule buttons

  • Because these buttons are text only, you can put slightly longer titles on them than other buttons. The text should still be clear and concise.


Setting up capsule buttons requires working with HTML. We can create these buttons for you or you can come to a drop-in session for help.

Adding class="btn_mid" to a link will create a button. 

Here is an example:

<a href="index.php" class="btn_mid">Button text</a>
To make the button narrower (as seen above), put it in a multicolum block and leave the second block empty.