A button with a box around it for emphasized links and calls to action. 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.

Examples and Code

Default styling [cta-button]

Call to Action Button

Default styling (light foreground)

Call to Action Button

  <a class="cta-button" href="">Call to Action Button</a>

Small Button [cta-button--sm]

Call to Action Button

  <a class="cta-button cta-button--sm" href="">Call to Action Button</a>

Submit Button [cta-button--submit]

A consistently green button, should used exclusively for primary site calls to action (e.g. apply) .

Call to Action Button

  <a class="cta-button cta-button--submit" href="">Call to Action Button</a>

Delete Button [cta-button--delete]

A consistently red button, should be used exclusively for destructive actions (e.g. delete account/data) .

Call to Action Button

  <a class="cta-button cta-button--delete" href="">Call to Action Button</a>

When to use

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. They should be avoided when making "menu" style navigation with multiple links in a row or side-by-side- instead use a "Resource Listing" for larger groups of links like that.

When to consider something else

When building long lists of links, you should 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.

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.

Tips for using Call to Action Buttons

• Avoid making large lists of call to action buttons. Call to action buttons can work in grids and lists when you have 2 or 3 buttons. Too many buttons in one group can be hard to read and visually distracting. For large groups of links you should create a "Resource Listing" or a grid of them to present the user with a longer list of links.
• Avoid using more than one "Submit" button per page. The goal of the submit button is to act as the primary call to action button for the page or site (such as an apply button). Multiple submit buttons on the same page make it unclear what the main priority of the page is.
• Do not try manually setting the color of the text, background, or border. The button dynamically changes its colors based on context and manually setting these values will cause it to break display on hover and focus, and will violate our accessibility rules. If the button is used in a unique context where it needs to be dark text instead of light (or vice-versa), use the "context--foreground-light" or "context--foreground-dark" class on the parent element to make it use the alternate version.