Overview

Buttons! They make navigation both simpler and snazzier. You've seen them all over the web, and with a little bit of code, you can add them to your Canvas courses! There are lots of different methods out there for adding buttons, so if you don't feel comfortable with HTML coding, check out our module on Design Assets.

What Does a Button Look Like on a Page

The button below leads to this course's homepage and matches the code snippet!

Button Text Here

Anatomy of the Code Snippet

How to Do This

Highlight and copy the code.
Navigate to Canvas page and click "Edit", then switch to HTML Editor.
Paste the snippet where you want your button to show on your page.
Replace the URL (web address) in the code snippet with the URL of the page you'd like your button to go to when clicked.
Change the button text to what you'd like your button to say.
Save your work and test your button!

Modify the Code

Change the width of your button by changing the width percentage number! The example button is at 20%.
Change the background and text color by changing the hex codes. Remember to think about accessibility when choosing your colors!
You can change the justification of your button by highlighting your button's text in the Rich Content Editor and selecting left, center, or right justification.

Troubleshooting & Working with Other Buttons

Your button won't look special at all in the Rich Content or HTML Editors. To see your button, you must save your work.
If your button isn't going anywhere when clicked, double-check the URL you pasted in! Make sure that it still has the quotation marks around it, as well.
If the text on your button is longer than the width of the button, it will automatically get taller rather than wider. If you don't want a 'chunky' button, add width!
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.
In Edit mode, buttons can be selected and copied, then pasted into another Canvas location without needing to go into the HTML Editor.
The title of a button can also be edited directly from the Rich Content Editor, without having to go into the HTML Editor.

Examples of Other Buttons

The code snippet for each button is below the button example!

Wide Dark Grey Button

<p><a class="btn-large btn-info btn" style="width: 40%; background: #636568; color: #ffffff;" href="https://unomaha.instructure.com/courses/39363">Wide Lime Button</a></p>

Wide Centered Button

<p style="text-align: center;"><a class="btn-large btn-info btn" style="width: 40%; background: #000000; color: #ffffff;" href="https://unomaha.instructure.com/courses/39363">Wide Centered Button</a></p>

Red Centered Button

<p style="text-align: center;"><a class="btn-large btn-info btn" style="width: 20%; background: #D71920; color: #ffffff;" href="https://unomaha.instructure.com/courses/39363">Red Centered Button</a></p>

START HERE Announcements Syllabus Learning Modules Discussion Topics

<p class="icon-forward Button Button--primary" href="https://unomaha.instructure.com/courses/39363" data-api-endpoint="https://unomaha.instructure.com/courses/39363" data-api-returntype="Page"> START HERE</a> <a class="icon-announcement Button Button--primary" href="https://unomaha.instructure.com/courses/39363"> Announcements</a> <a class="icon-star Button Button--primary" href="https://unomaha.instructure.com/courses/39363"> Syllabus</a> <a class="icon-module Button Button--primary" href="https://unomaha.instructure.com/courses/39363" data-api-endpoint="https://unomaha.instructure.com/courses/39363" data-api-returntype="[Module]"> Learning Modules</a> <a class="icon-discussion Button Button--primary" href="https://unomaha.instructure.com/courses/39363" data-api-endpoint="https://unomaha.instructure.com/courses/39363" data-api-returntype="[Discussion]"> Discussion Topics</a></p>