Buttons

In this Canvas instance, actual <button> elements are removed from content created in the Rich Content Editor. Instead, links (<a>) are visually styled to look like buttons. This page shows:

• Canvas' legacy button classes (such as btn btn-primary).
• Modern inline CSS examples for styling links as buttons.

For navigation (moving to another page, opening a resource), links are semantically correct. For true "actions" (submitting a form, toggling a state) the ideal element would be a real <button>, but this is not available in this Canvas configuration.

Useful references

• MDN: <a> (anchor) element
• MDN: button role (when and how to use it)

Button styles (Canvas legacy classes)

Standard Canvas buttons use the base btn class combined with a contextual class such as btn-primary or btn-success. These classes come from a legacy Canvas style guide and may change in future, but still work in current pages.

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

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

<a class="btn btn-success" href="#">Success button</a>

<a class="btn btn-warning" href="#">Warning button</a>

<a class="btn btn-danger" href="#">Danger button</a>

Button sizes (Canvas legacy classes)

You can adjust the size of a Canvas button by adding one of the optional size classes: btn-large, btn-small, or btn-mini.

<a class="btn btn-primary btn-large" href="#">Primary button (large)</a>

<a class="btn btn-primary btn-small" href="#">Primary button (small)</a>

<a class="btn btn-primary btn-mini" href="#">Primary button (mini)</a>

Modern inline-styled links as buttons

If you prefer not to rely on Canvas' legacy classes, you can style links as buttons using inline CSS. This uses standard CSS properties such as background-color, padding, border-radius, and display: inline-block;.

The examples below keep the default browser focus outline for keyboard users by not overriding the outline property.

Primary and secondary actions

<a href="#" style="display: inline-block; padding: 0.5rem 1rem; border-radius: 0.375rem; background-color: #0000cd; color: #ffffff; text-decoration: none; font-weight: 600;">
  Primary action
</a>

<a href="#" style="display: inline-block; padding: 0.5rem 1rem; border-radius: 0.375rem; border: 1px solid #0000cd; color: #0000cd; background-color: #ffffff; text-decoration: none; font-weight: 600;">
  Secondary action
</a>

Full-width call-to-action

A full-width call-to-action link can be created using display: block; and text-align: center;. This works well for important actions on mobile screens.

<a href="#" style="display: block; padding: 0.75rem 1rem; border-radius: 0.5rem; background-color: #008080; color: #ffffff; text-align: center; text-decoration: none; font-weight: 600;">
  Full-width call to action
</a>

Subtle text-style button

Sometimes you may want a link that looks more like a subtle control than a bold button. The example below uses a simple underline and colour, without a filled background.

<a href="#" style="display: inline-block; padding: 0.25rem 0; color: #0000cd; text-decoration: underline; font-weight: 500;">
  Subtle action link
</a>

Accessibility notes

• Use these styles for navigation actions (for example, "View assignment", "Open resource"), where a link is the correct HTML element.
• Avoid adding role="button" to links unless you also handle keyboard activation exactly like a real button (which usually requires JavaScript).
• Do not remove the focus outline. The inline examples here avoid overriding outline so that keyboard users can still see which element is focused.
• Ensure colour contrast between background and text meets at least WCAG AA for the size of text you are using.