Uses

On the School of Medicine site, buttons are used for call-to-action links. They should be used judiciously as a way to make a link stand out from the content. Typically buttons are used throughout a homepage, and seldomly throughout interior pages. Primary buttons should be seldomly used multiple times on the same page, however, secondary buttons can be used more often.

Styles

There are two types of buttons, a primary button and a secondary button. The primary button is a red #a51417 square button with no rounded corners with white inner text. The secondary button, sometimes called the outline button, is a white button with a red border and red text.

Examples

Primary Button

Secondary Button

Code

HTML
<a data-category="Front page" data-action="Call to action" data-label="Why we love St. Louis" class="cta-button secondary" href="#"> <span class="cta-button-wrap">Why we love St. Louis</span></a>
CSS
article blockquote { margin: 35px 0 35px 40px; padding-left: 25px; border-left: 2px solid #900; font-weight: 300; font-size: 22px; line-height: 32px; } article blockquote p { font-size: 22px; line-height: 32px; margin-bottom: 25px; }