Exercise 4: Buttons, Buttons, Buttons!!!

A Master Class in Buttons

Buttons! Gotta love 'em, right? 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 I've simplified as much as possible while still allowing you fairly unrestricted customization options. The button below leads to this course's homepage and matches the code snippet! (Note: Pay close attention to the Modify the Code section of this lesson! Buttons have so much potential!)

Button Text Here

The Code Snippet

<a class="btn-large btn-info btn" style="width: 20%; background: #000000; color: #ffffff;" href="https://lcc.instructure.com/courses/1696714">Button Text Here</a>

Anatomy of the Code Snippet

A description of the code snippet's parts.

Steps to Create a Button on a Canvas Page

  • Highlight and copy the code snippet.
  • Navigate to a Canvas page and go to Edit mode.
  • Switch to the 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 & Tips

  • 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

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

Wide Lime Button

<p><a class="btn-large btn-info btn" style="width: 40%; background: #00FF00; color: #000000;" href="https://lcc.instructure.com/courses/1696714">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://lcc.instructure.com/courses/1696714">Wide Centered Button</a></p>

Red Centered Button

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