Create a Button in Canvas

We're all familiar with creating links in Canvas but you can enhance your course appearance and emphasize a call to action with html buttons. This guide explains the process of adding a button to your Canvas course and provides you with the code to make it simple:

Open the RCE anywhere in Canvas.
Toggle to the HTML view.
Paste the button html code <a class="btn btn-Size btn-primary" href="Link Goes Here">Button Text Goes Here</a>
Change the size, link, and button text placeholders in the copied code.
Save your changes.

HTML code must be exact to work correctly. Ensure you:

Enter your replacements exactly where placeholders are located in copied code.
Do not accidentally replace any of the other characters when inputting your new values.
Avoid extra spacing or duplicating punctuation that is not represented in the code provided.

Need more detail?

Delve into the in-depth walkthrough below, complete with images and various notes for every step.

Step 1: Open the RCE

Head to any area within Canvas that has the Rich Content Editor (RCE). This is the space where you edit content in Pages, Assignments, Announcements, Discussions, and more.

Step 2: Switch to HTML View

Click on the HTML toggle button to switch from the what-you-see-is-what-you-get (WYSIWYG) view. Note, the HTML editor can be utilized to customize your course, but not all code is accepted by Canvas. Canvas Help agents do not provide support for these types of custom solutions.

Step 3: Paste the Code

Copy this line of code and paste it where you'd like to insert your button:

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

For this code to work, you must replace three placeholders in the pasted code with information relevant for your button. Steps 4, 5, and 6 walk through that process.

Step 4: Customize the Size Placeholder

There are four sizes of buttons you can use in Canvas by replacing the word Size in the code provided with mini, small, group, or large.

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

Mini-sized button = mini
Small button = small
Medium button = group
Large button = large

Step 5: Customize the Link Placeholder

Replace Link Goes Here with the URL you'd like the button to route people to. It is recommended to use buttons for locations outside your Canvas course, called external links. Using a button for a link within your Canvas course will not work once you copy your course for a future term. Any internal links must be updated for the next group of students to not receive an error that they do not have access.

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

Step 6: Customize the Text Placeholder

Replace Button Text Goes Here with the text you'd like to display on the button.

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

Step 7: Leave HTML View

When you click the HTML toggle button, Canvas will switch back to the what-you-see-is-what-you-get (WYSIWYG) view. Don't be alarmed that you don't see a button yet, the appearance only displays correctly once your work is saved in the next step. Even though this step is optional, it is how you can ensure your button is located in the place you want within your other content.

Step 8: Save Your Work

Click Save once you've replaced the placeholders, then ensure your button routes exactly where you intended it to go.

Buttons in Canvas FAQ

Are there additional ways to customize a button?

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

Your placeholder values not replaced correctly, or your link not being copied properly, can both lead to errors. Remember, HTML code must be precise for it to work correctly. Carefully examine your work for exact match to the instructions.

Link error stating 'this page can't be reached'

How can I efficiently manage buttons?

Often you will find yourself needing the same button in more than one place in your classroom. Create an unpublished Canvas page (or even a Word document) that you can paste the button's code into for easy access the next time you need it.

Can buttons be copied?

Yes. In Edit mode, buttons can be selected and copied, then pasted into another Canvas location without needing to go into the HTML Editor.

How can I easily change the title of a button?

The title of a button can be edited directly from the Rich Content Editor, without having to go into the HTML Editor.