Buttons
BUTTONS: COPY & PASTE
Buttons without icons available below for copying and pasting in the Visual Editor.
Buttons with commonly used icons are also available below for copying and pasting in the Visual Editor. Want to choose from any of the 2,000+ icons available in our icon library? Skip ahead to the Advanced section.
Selection bars are necessary for all buttons.
When editing the button text, do not select the entire text, because this will remove the link (and thus the styles) altogether. Instead, leave some text at the end, then delete that text after you have edited the button text.
Click or tap to expand for the buttons.
Buttons Without Icons
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Buttons With Link Icon
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Buttons With Book Icon
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Buttons With Next Icon
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Buttons With Back Icon
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Buttons With Home Icon
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Buttons With Pencil Icon
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
Start of Selection
End of Selection
BUTTONS: INFO & NOTES
Buttons are an excellent way to make your links more prominent. They stand out when someone is skimming a page, and their larger size makes them easy to select.
Ways you could use buttons in Canvas…
- Add to your course home page to give quick and easy access to important course components. (Check out Content Blocks for a row of buttons.)
- Add a “Back to Home” button or other buttons to allow students to easily navigate your course.
- Add some visual flair to links contained in your Announcements so students recognize them as actions to take.
Notes
- All buttons must be on their own line to display properly, including text link animated. Do not use these buttons on links you want in the middle of content, such as a paragraph.
- Buttons shrink and grow to fit their anchor text Links to an external site.. Don’t use very long anchor text, as this may result in the button taking up multiple lines, especially on mobile devices.
- The demo buttons have all caps text. This is not forced by the code, so you are welcome to do either all caps or lowercase.
- Be careful with background colors. These buttons display well on a white background, but they may not be as effective on other colors.
BUTTONS: DEMO
All buttons go to your Canvas dashboard. Animated buttons respond differently to click and hover states.
ADVANCED: CUSTOMIZE BUTTON ICONS
If you want to choose from 2,000+ icons available in our icon library, follow the directions below. This will require copying and pasting in the HTML Editor.
- Open Font Awesome Links to an external site. and find the icon you want to use. (For more info on Font Awesome, review the Icons page.)
- Copy the icon’s code by clicking the icon, then clicking the code snippet.
- In the Codepen embed, select [ICON CODE PLACEHOLDER] and replace it with the copied Font Awesome icon code using Ctrl+V (PC), Cmd+V (Mac), or right-click > Paste.
- Select the entire contents of the Codepen embed.
- Copy using Ctrl+C (PC), Cmd+C (Mac), or right-click > Copy.
- Go to your Canvas content and open the Rich Content Editor by selecting the Edit button in the top-right corner.
- Toggle to the HTML Editor by clicking the </> icon in the bottom-right corner.
- Locate where you want the item to appear using the Find bar.
- Paste using Ctrl+V (PC), Cmd+V (Mac), or right-click > Paste.
- Toggle back to the Visual Editor by clicking the </> icon in the bottom-right corner.
- Edit the content.
- Click the “Save” button in the bottom-right corner.