Button Styles

When copying buttons, the easiest way to adjust the links after they are in your course is by using the main text editor and clicking into the button. This opens a menu where you can select Link Options. This will allow you to easily change the name of the button and where the link is going. The first button option is simplest and allows for the most adjustment without breaking the formatting, you can remove the link and type/paste new links in easily. Color buttons that have a set width like in the bottom two examples are the most fragile when editing in Canvas. 

when you select a link in the rich content it brings up a link options menu


 

 

 

Example Button #1

<p style="background: #f9f9f9; border: 3px solid #c7cdd1; font-size: 18pt; padding: 15px; border-radius: 10px; text-align: center;"><a target="_blank" rel="noopener" href="#">Example Button #1</a></p>

 

 

 

Example Button #2

<p style="text-align: center; margin: 3%;"><a class="inline_disabled" style="color: #ffffff; font-size: 18pt; background: #00519b; border: #262359 3px solid; border-radius: 15px; padding: 8px;" href="#" target="_blank" rel="noopener">Example Button #2</a></p>

 

 

 

📥 Message Me

<p style="text-align: center; margin: 15px 0px 15px 0px;"><a class="inline_disabled" style="color: #ffffff; font-size: 18pt; background: #00519b; border: #262359 3px solid; border-radius: 15px; padding: 8px;" href="#" target="_blank" rel="noopener">📥 Message Me</a></p>

Note: As in the above example you can use emojis as icons for your buttons to help students quickly navigate.