Create an HTML Button in Canvas

While basic hyperlinks are a familiar part of Canvas courses, emphasizing a call to action can better capture student attention. This guide explains switching to HTML view in the Canvas Rich Content Editor (RCE) to create an interactive button.

HTML Considerations

Not all HTML is accepted by Canvas.
All customization must meet WCAG Level A and Level AA compliance.
HTML code must be written with perfectly for it to work.
Enter replacement text exactly where placeholders appear in the copied code.
Avoid extra spacing or duplicating punctuation that is not represented in the code provided.
Backspace and delete can mess up your HTML in the RCE.
You can copy HTML anywhere in your course for a consistent appearance.
Always confirm the results of your work before publishing.

Step 1: Copy the Code

<a class="btn btn-Size btn-primary" href="Link Goes Here">Button Text Goes Here</a>

Step 2: Open the HTML Editor and Paste the Code

Open the RCE in Canvas and click the HTML toggle button, represented with a less than-slash-greater than symbol, then paste the button code.

Step 3: Customize Placeholders

For this code to work, you must replace three placeholders: Button size, web address, and button text

Replace the word Size with mini, small, group, or large.
Replace the text Link Goes Here with the URL web address for your link destination.
Replace the text Button Text Goes Here with the button text of your choice.

Step 4: Leave HTML View and Check for Errors

When you click the HTML toggle button, Canvas will switch back to the WYSIWYG editing view. Make sure there are no errors in your typing, the Accessibility Checker, or Ally. The content will appear as standard hyperlinks until you have saved.

Step 5: Save Your Work and Check the Link

Save the changes to view the final appearance. Be sure to click the link to ensure your intended location opens.

A saved html button opens a webpage when clicked

Buttons in Canvas FAQ

Are there additional ways to customize a button?

Yes. You can adjust the width with the code by a percentage of the Canvas space or change the background and font colors with Hex color codes.

Change the Width: <a class="btn btn-Size btn-primary" style="width: 50%;" href="Link Goes Here">Button Text</a>
Change the Background and Font Colors: <a class="btn-Size btn-info btn" style="background: #000000; color: #ffffff;" href="Link Goes Here">Button Text Here</a>
Change the Width and Colors: <a class="btn-Size btn-info btn" style="width: 50%; background: #000000; color: #ffffff;" href="Link Goes Here">Button Text Here</a>

Why is my button showing an error?

You've most likely made a minor mistake if you see an error like Hmmm...can't reach this page. Check your placeholder values were replaced correctly and your link was copied properly. Remember, HTML code must be precise for it to work. Carefully compare your work is an exact match to the instructions.

How can I efficiently manage buttons?

If you need to use the same button often, keep a document of the HTML you create. Use an unpublished Canvas Page or Word document save to your Canvas Files that you can reference quickly.

Can buttons be copied?

Yes. Although buttons can be selected and copied in the RCE, copying the code from the HTML Editor is more precise and can reduce errors.

How can I easily change the title of a button?

The title of a button can be edited directly in the RCE or in the HTML editor.