Cornerstone

Buttons

Buttons can be a or button elements. They can be modified with various classes.

If you are linking to a page or an anchor, use the a element.

Example:

<a class="tcu-button _primary" href="https://www.tcu.edu/apply.php">Apply</a>

If you are triggering an event with JavaScript, use the button element.

Example:

<button class="tcu-button _secondary">Expand Menu<button>

Rules for primary and secondary button styles:

Primary button: Use the primary button style more frequently than the secondary. Especially, if there are multiple CTA buttons on a page.

Secondary button: Use the secondary button style less frequently than the primary. If there are multiple CTA button on a page, use the primary style unless there is a special call-out you want to call attention to.

<h2>Colors</h2>
<a href="" class="tcu-button _primary | button primary">
    Primary Button
</a>
<a href="" class="tcu-button _secondary | button secondary">
    Secondary Button
</a>
<h2>Sizes</h2>
<a href="" class="tcu-button _expanded | button expanded">
    Expanded Button
</a>
<a href="" class="tcu-button _small-only-expanded | button small-only-expanded">
    Expanded on Mobile Only
</a>
<h2>Types</h2>
<a href="" class="tcu-button _hollow | button hollow">
    Hollow Button
</a>
<a href="" class="tcu-button _clear | button clear">
    Clear Button
</a>
<a href="" class="tcu-button _icon | button icon">
    <svg height='30' width='30'>
        <use xmlns:xlink='https://www.w3.org/1999/xlink' xlink:href='#icon-facebook' href='#icon-facebook'></use>
    </svg>Icon Button
</a>