Instructions: The content on this page is for faculty use only. The directions and the HTML to learn how to create Canvas buttons, links, and pop-up boxes are included on the page.

Adding Canvas Buttons, Links, and Pop-up Boxes with Content

If you want to improve your Canvas course navigation beyond the standard blue hyperlinked text, creating HTML buttons can add engaging interactions for your students. You can link these buttons to various Canvas course navigation elements, such as Pages, Modules, Grades, and more. Additionally, you can link to external webpages and downloadable documents.

To create a Canvas button, access the HTML editor on the Rich Content Editor page. Buttons serve as hyperlinks. Begin by typing the text you want for the button; for example, if you want a "Home" button, type "Home" and link it to the appropriate location in your course. Here is a link to those needing a refresher on using the HTML view in the Rich Content Editor. The code in your HTML editor may look something like this:

<a href="Your URL Goes Here">Button Text</a>

<a href="https://lssc.instructure.com/courses/18063">Home</a>

You can style it like a button now that you have your hyperlink. Canvas buttons are stylized hyperlinks. To transform your hyperlink into a button, add the code `class= "btn"` to your anchor tag (`<a>`). After making this change, your code should appear like this:

<a class="btn" href="https://lssc.instructure.com/courses/18063">Home</a>

Next, you need to determine the size of your button. Essentially, the sizes are mini, small, medium, and large. The medium button is a " group " class with less rounded corners than the large one. Below are the HTML codes to make the boxes mini, small, medium, or large. The code for these buttons is as follows:

<a class="btn btn-mini">mini button</a>

mini button

<a class="btn btn-small">small button</a>

small button

<a class="btn btn-group">medium button</a>

medium button

<a class="btn btn-large">large button</a>

large button

Let's combine one of the button size codes above with our initial "Home" button.

<a class="btn btn-large" href="Your URL Goes Here">Button Text</a>

Unfortunately, Canvas has limited colors in its style guide for buttons. Using your current "Home" button, the various color options and their codes are below.

Blue - <a class="btn btn-large btn-primary" href="https://lssc.instructure.com/courses/18063">Home</a>

Home

Orange - <a class="btn btn-large btn-warning" href="https://lssc.instructure.com/courses/18063">Home</a>

Home

Red - <a class="btn btn-large btn-danger" href="https://lssc.instructure.com/courses/18063">Home</a>

Home

Green - <a class="btn btn-large btn-success" href="https://lssc.instructure.com/courses/18063">Home</a>

Home

Black - <a class="btn btn-large btn-info" href="https://lssc.instructure.com/courses/18063">Home</a>

Home

Link - <a class="btn btn-large btn-link" href="https://lssc.instructure.com/courses/18063">Home</a>

Home

Let's combine the button size code with one of the colors above with our initial "Home" button.

<a class="btn btn-large btn-primary" href="Your URL Goes Here">Button Text</a>

Home

Pop-Up Boxes

Canvas pop-up boxes can be easily created using straightforward HTML code within the HTML editor. Instead of directing students to a course page or another website, you can design a clickable button that displays a content box on the screen. Hence, the code will resemble the following:

<div id="dialog" class="enhanceable_content dialog">To get help with Canvas at any time, click the Help icon along the left-hand edge of the window.</div>
<p><a class="btn btn-large btn-warning" title="This is the button description" href="#dialog"> Help & Support </a></p>

To get help with Canvas anytime, click the Help icon along the left-hand edge of the window.

Help & Support

HTML with added width size:

<div id="dialog" class="enhanceable_content dialog">To get help with Canvas at any time, click the Help icon along the left-hand edge of the window.</div>
<p><a class="btn btn-large btn-success" style="width: 20%;" title="This is the button description" href="#dialog"> Help & Support </a></p>

Example with added width (style="width: 20%;"):

To get help with Canvas anytime, click the Help icon along the left-hand edge of the window.

Help & Support