How to create a button in Canvas
Written Guide
Visual Guide
Written Guide
Step 1
Head to any area within Canvas that has the Rich Content Editor (RCE). This is the space where you'll edit content that goes on a page, at the start of an assignment, or even when defining a Canvas discussion board.
It looks like the area pictured [left] but can also be identified with menu options such as 'Edit', 'View', 'Insert', 'Format', 'Tools', 'Table' or tools like 'Insert Link', 'Insert Media', and many other word processor options like Bold, Italicized, and underline options.
Step 2
Click on the < / > button in the bottom right of the RCE space, next to the total word count.
This is the HTML editor and can be utilized to customize the Canvas experience through more granular efforts, not unlike this guide.
Step 3
Find the space/line where you'd like to insert your button.
Copy/paste this line of code:
<p><a class="btn btn-Size btn-primary" href="Link Goes Here">Button Text Goes Here</a></p>
If will look like this in the editor...
If you do not know how to navigate an HTML editor, try reaching out to your site's instructional designer for help.
Step 4
Now that the code is in the editor, you'll need to replace three parts of the copy/pasted code with information relevant to what you want that button to be. The parts of the code are in red, but can be identified as:
Size - Replace this value with the preferred size of the button. The values are; mini, small, group, large. See the 'Reference' area at the bottom of this guide for more details on button sizing.
Link Goes Here - Replace this value with the hyperlink you'd like the button to go to. This can be an external link, or another part of your Canvas course.
Button Text Goes Here - Replace this value with the text you'd like to display on the button.
Make sure to enter your replacements exactly where these three values are and do not leave any part of the old values and adversely, do not replace any of the other characters when inputting your new values.
Example: Notice in the example below that I wanted a large button, so I replaced the Size value with 'large'. The 'Link Goes Here' value was replaced with the URL I wanted, and I changed the button text to 'Start Here'.
Output
Step 5
Don't forget to hit the 'Save' button once you've replaced the values to your button in step 4!
Alternatively, you can click on thebutton in the bottom right to go back to the RCE and edit other elements of your page.
Finished! Your button will appear on your Canvas page. Please view the bottom 'Troubleshooting and Tips' section if you run into any issues.
Customize your Button
Customize your Button
Take your button a step further and adjust the width with the code below! this code is the same as the one above, but includes a 'width' percentage, try some different sizes between 1-100%!
Copy/paste this line of code:
<p><a class="btn btn-Size btn-primary" style="width: 50%;" href="Link Goes Here">Button Text</a></p>
Output
Copy/paste this line of code:
<p><a class="btn-Size btn-info btn" style="width: 50%; background: #000000; color: #ffffff;" href="Link Goes Here">Button Text Here</a></p>
Output
Troubleshooting and Tips
Troubleshooting and Tips
My Link isn't working properly?
This would be due to the values not replaced correctly or your link wasn't copied properly. If the link does not work, check back to step 4 and make sure your URL is between quotation marks (Example: "URL GOES BETWEEN QUOTES")
My link doesn't show as a button, even though I followed instructions.
This is because your button will only populate on the actual Canvas page, and won't show in the Rich Content Editor area. Click 'Save' to exit your RCE area and you'll see the button.
- 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.
Video Guide
Video Guide
Reference
Reference
There are four sizes of intractable buttons that can be created using this guide. They are pictured [left] but can be classified as; mini, small, medium, or large.
For step 4, use the following attribute values to make the button into your desired size. If you want a...
- Mini-sized button = mini
- Small button = small
- Medium button = group
- Large button = large