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 customizations must meet WCAG Level A and Level AA compliance.
HTML code must be written 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

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

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

HTML Button FAQ

Are there additional ways to customize a button?

Yes. You can adjust the width by a percentage of the Canvas space or change the background and font colors using 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>

Button customized to be black and 50% of screen size

Why is my button showing an error?

If you see an error like Hmmm...can’t reach this page, there’s likely a small mistake in your code. Check that you replaced all placeholder values and copied the link correctly. HTML must be written precisely to work—compare your version closely with the instructions.

Error example for button

How can I efficiently manage buttons?

If you use the same button frequently, keep a saved copy of the HTML. Use an unpublished Canvas Page or a Word document saved to your Canvas Files for quick reference.

Can buttons be copied?

Yes. You can copy buttons directly in the Rich Content Editor, but copying the HTML from the HTML Editor is more accurate and can help avoid errors.

How can I easily change the title of a button?

You can edit the button text directly in the Rich Content Editor or in the HTML Editor.