Below is an example of navigation buttons embedded in column one of a table, with a description of where the button will take you in column two. This is a great tool to use on the Home page of a course to easily direct students to specific content in your course.

Announcements	This is just an example. All you will find on the Announcements page is a button to return you here.
Syllabus	Again, another example with a button on the syllabus page to return you here
Modules	Access the course modules here. You will need to use your browser's back button to get back to this page.
About Your Instructor	Learn about your instructors for this course. Then click the button to return here.
Textbook	There is no textbook for this course, but you will find a page with a button to return here.
Student Information Station	This will take you to the Discussion for this classroom, and yet another button to return you here.

The Code That makes this possible

The section of code that identifies the target of the button are in bold red font, and the section of code that is the title of the button is identified by bold blue font. Please keep in mind that this color-coding will not show when you paste the code into the HTML Editor.

<table style="width: 100%; max-width: 640px; border: none; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr>
<td style="width: 40%; padding: 10px; background: #f9f9f9;"><a class="btn-large btn-info btn" style="width: 70%;" href="/courses/1165489/announcements">Announcements</a></td>
<td style="width: 60%; padding: 10px; background: #f9f9f9;">This is just an example. All you will find on the Announcements page is a button to return you here.</td>
</tr>
<tr>
<td style="width: 40%; padding: 10px;"><a id="" class="btn-large btn-info btn" style="width: 70%;" title="" href="/courses/1165489/assignments/syllabus">Syllabus</a></td>
<td style="width: 60%; padding: 10px;">Again, another example with a button on the syllabus page to return you here</td>
</tr>
<tr>
<td style="width: 40%; padding: 10px; background: #f9f9f9;"><a class="btn-large btn-info btn" style="width: 70%;" href="$CANVAS_COURSE_REFERENCE$/modules">Modules</a></td>
<td style="width: 60%; padding: 10px; background: #f9f9f9;">Access the course modules here. You will need to use your browser's back button to get back to this page.</td>
</tr>
<tr>
<td style="width: 40%; padding: 10px;"><a class="btn btn-info btn-large" style="width: 70%;" href="$WIKI_REFERENCE$/pages/about-the-instructor" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/about-the-instructor" data-api-returntype="Page">About Your Instructors</a></td>
<td style="width: 60%; padding: 10px;">Learn about your instructors for this course. Then click the button to return here.</td>
</tr>
<tr>
<td style="width: 40%; padding: 10px; background: #f9f9f9;"><a class="btn btn-info btn-large" style="width: 70%;" href="$WIKI_REFERENCE$/pages/textbooks%20" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/textbooks%20" data-api-returntype="Page">Textbook</a></td>
<td style="width: 60%; padding: 10px; background: #f9f9f9;">There is no textbook for this course, but you will find a page with a button to return here.</td>
</tr>
<tr>
<td style="width: 40%; padding: 10px;"><a class="btn btn-info btn-large" style="width: 70%;" href="/courses/1165489/discussion_topics/4386607" data-api-endpoint="https://cptc.instructure.com/api/v1$CANVAS_OBJECT_REFERENCE$/discussion_topics/ifb6a70b069b517aff9b78bb1f58dd13f" data-api-returntype="Discussion">Sharing Discussion</a></td>
<td style="width: 60%; padding: 10px;">This will take you to the Discussion for this classroom, and yet another button to return you here.</td>
</tr>
</tbody>
</table>

How to Add This Code to Your Home Page

Select and copy the complete code shown above
Navigate to your Home Page, or create a new content page;
Click Edit, then Click HTML Editor,
Paste this code onto the page,
Click Save

Tip!

You have probably already noticed that you will want more information on your home page than just this silly table. Perhaps some introductory sentences and the like. You have probably also guessed that you won't want to muck around in the existing code to find the right place to insert all of this code. In edit mode and before you switch to the HTML Editor, add all the content you would like to see on your home page before the table with the buttons. Then switch to the HTML Editor, and paste the above code at the end of any existing code (just drop down a line below and paste). Then, when you switch back to the Rich Content Editor, you will be able to add any additional content after the table in your normal manner.

I also find that if you use the technique shown in the video below to modify where the button points to you sometimes loose the button and are left with a link only. So what I do is have my Canvas classroom open in another tab so that I can easily navigate to the location, copy the URL from the "/courses...." point then paste that URL into the appropriate location in the code.

How to modify this table and its buttons using the Rich Content Editor

Now that you have pasted the code above into the HTML editor of a page, you are probably wondering how you can easily modify the names of the buttons, where they navigate a user too and the descriptive text for each button in the table. Watch this short video below to learn how easy this is.