Call to Action Button
Call to action buttons are visually distinct links used for extra emphasis in the design. They can help tie a design together or highlight a primary call to action for a page. By default the buttons will display as black text (turning green on hover/focus), but on a dark background the text and border will be white and the background will turn yellow on hover.
This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template
Examples and Code
Section titled “Examples and Code”
Open Full Example
<a class="cta-button cta-button--standard" href="https://uoregon.edu">Call to Action Button</a>
Open Full Example
<a class="cta-button cta-button--submit" href="#">Apply to the UO</a>
<a class="cta-button cta-button--delete" href="#">Delete Profile</a>Call to action buttons should be used in grids, cards, or at the end of a paragraph or chunk of text for links to lead the reader to dig deeper or take action (such as apply or donate) related to the current card or paragraph context.
Guidance
Section titled “Guidance”When to Use Call to Action Buttons
Section titled “When to Use Call to Action Buttons”- For primary calls to action: CTA Buttons work great as the primary call to action on a page.
- In a small grid: For grids with 2-3 items CTA button can work well.
- At the bottom of card elements: Use the CTA Buttons as the key link to read more about the content of the card.
When to Consider Another Component
Section titled “When to Consider Another Component”- Long lists of links: When building long lists of links, use Resource Listings instead, as large groups of call to action buttons do not read clearly to the user. If everything is a call to action, then nothing is.
- Form buttons: For form buttons, you should use a proper form button, as the “Call to Action” button is actually a link, and forms should be using the HTML button element for form submissions and similar form actions.
Usage Guidance
Section titled “Usage Guidance”- Limit to one submit or delete button per page: The submit and delete buttons are intended to provide the core action for a page.
- Don’t use delete or submit button for visual styling: The color helps further communicates meaning and is not intended for styling purposes.
- Don’t manually set background or foreground colors: Manually changing the colors will break hover/active states and result in poor display and improper contrast.
Accessibility Guidance
Section titled “Accessibility Guidance”- Check text contrast by default and on hover and keyboard focus: Since CTA buttons switch their displays automatically with the background color, they should generally have sufficient text contrast. Make sure, however, when using them over images or custom background that the button has sufficient contrast by default and while hovered over.
Elements
Section titled “Elements”| Element | Description | Usage | Required | Multiple |
|---|---|---|---|---|
| Text | The link text | Limit the title to a word or short phrase | Yes | No |
Styles
Section titled “Styles”| Classname | Effect | Reason to Use |
|---|---|---|
| (Default, no style class) | Gradient over text at bottom | Use for most cases |
cta-button--submit | Green Background instead of transparent | Use for a primary call to action, limit to one per page (e.g. Apply) |
cta-button--delete | Red background instead of transparent | Use to indicate “destructive” actions, such as deleting data |