Overview
Use a button when learners need to take action or access a resource that is important to completing the course, assignment, or activity. Use a standard link when the resource is supplemental or informational.
Common Pitfalls to Avoid
- Using buttons for every link on a page, reducing their visual importance
- Using vague labels such as “Click Here” or “Learn More”
- Using buttons for supporting resources that could be presented as standard links
- Placing too many buttons together, making it difficult for learners to identify the primary action
[Example]
Evaluating Safe Cooking Practices
For this assignment, you will review several cooking scenarios and determine whether each food item has been cooked to a safe internal temperature. To complete the activity accurately, you will need to reference the recommended minimum internal temperatures for different foods.
Use the Internal Temp Chart throughout the assignment to verify your answers before submitting your work.
CDD Tag
<button></button>
Guidelines
Do
ID
Use Buttons for Required Actions and Resources
Use buttons when learners must access a resource, complete an action, or navigate to content that is essential to successfully completing a course activity, assignment, project, or learning task. Buttons should signal importance and help learners quickly identify required next steps.
ID
Production
Keep Labels Short and Action-Oriented
Use concise, active verbs such as Start, View, Download, or Submit. Short labels improve scannability and make it easier for learners to quickly understand the intended action.
Do Not
ID
Avoid long text inside buttons. Buttons are intended for quick actions, not explanations. If you need context, provide it outside the button. Internal buttons (red) or external buttons (blue) should remain short and action-focused.
ID
Production
Avoid Overusing Buttons for Navigation
Avoid using buttons for routine navigation, as this approach does not scale well and becomes difficult to maintain and update over time. Canvas already provides built-in navigational elements that should be used instead. Buttons should be reserved for clear actions, not simple page-to-page movement. For course navigation, use consistently styled standard links, while reserving red buttons for internal actions and blue buttons for external actions.