Body
Button Intent and Usage
Buttons should be used as needed to provide calls to action throughout the site and are helpful for drawing attention to opportunities to interact. Buttons are typically associated with actions the user can take rather than straight navigation.
Body
Button Design Guidelines
- Buttons are programmed with appropriate styling to be visible on light and dark backgrounds.
- Buttons provide built-in visual effects to represent different states (hover state, active, focus, disabled), which is valuable for site accessibility and keyboard-based interaction.
- Button type (default, secondary, or tertiary) should be selected based on how prominently the button needs to be featured on a page. Go with the default type most of the time. One of the other button types may be used if the look and feel of the page calls for it. For example, if multiple buttons are being used on one page or if the button does not ask the reader to take an action directly related to the page purpose.
Body
Button Content Guidelines
- Button text should be short and succinct, ideally no more than 2–3 words, and should indicate the action the user is taking by pressing the button.
- Examples: “View Details,” “Submit Application,” “Find Your Place”
- Do not use periods at the end of button text.
- Longer text may sometimes be needed and often buttons contain 5–6 words on the MDC website.
- Longer buttons that function as complete sentences should be lower case.
- “Contact your local private land conservationist”
- “Learn more about reptiles and amphibians”
- “View bluebirds in the field guide”
Body
Button Examples
Body
Primary (default)
Body
Secondary
Body
Tertiary
Body
Examples of Buttons on MDC Website
Links for these example buttons go to the page where these buttons appear.
Title
Examples of "secondary" buttons
Link or File
Title
Examples of "tertiary" buttons
Link or File