Link

Buttons

Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.

When using a <button> element, always specify a type. When using a <a> element, always add role="button" for accessibility.

Default Buttons

Default buttons are intended to be the most common size used for marketing pages.

Solid Buttons

Button

<a class="btn-mktg-fluid">Button</a>
<button class="btn-mktg-fluid">Button</button>
<input type="button" class="btn-mktg-fluid" value="Button">

Solid Purple Buttons

Button

<a class="btn-mktg-fluid btn-purple-mktg-fluid">Button</a>
<button type="button" class="btn-mktg-fluid btn-purple-mktg-fluid">Button</button>
<input type="Button" class="btn-mktg-fluid btn-purple-mktg-fluid" value="Button">

Outlined Buttons

Button

<a class="btn-mktg-fluid btn-outline-mktg-fluid">Button</a>
<button class="btn-mktg-fluid btn-outline-mktg-fluid">Button</button>
<input type="button" class="btn-mktg-fluid btn-outline-mktg-fluid" value="Button">

Outlined Purple Buttons

Button

<a class="btn-mktg-fluid btn-purple-outline-mktg-fluid">Button</a>
<button type="button" class="btn-mktg-fluid btn-purple-outline-mktg-fluid">Button</button>
<input type="Button" class="btn-mktg-fluid btn-purple-outline-mktg-fluid" value="Button">

Outlined White Buttons

Button
<a class="btn-mktg-fluid btn-purple-outline-mktg-fluid">Button</a>
<button type="button" class="btn-mktg-fluid btn-purple-outline-mktg-fluid">Button</button>
<input type="Button" class="btn-mktg-fluid btn-purple-outline-mktg-fluid" value="Button">

Invisible Buttons

These are intended to be used as secondary calls to action with the same top and bottom padding as buttons so they will vertically align with buttons using other button style variants.

Button

<a class="btn-invisible-mktg-fluid">Button</a>
<button type="button" class="btn-invisible-mktg-fluid">Button</button>
<input type="Button" class="btn-invisible-mktg-fluid" value="Button">

Invisible Purple Buttons

Button

<a class="btn-invisible-mktg-fluid btn-purple-mktg-fluid">Button</a>
<button type="button" class="btn-invisible-mktg-fluid btn-purple-mktg-fluid">Button</button>
<input type="Button" class="btn-invisible-mktg-fluid btn-purple-mktg-fluid" value="Button">

Large Buttons

These larger variants are intended to be used sparingly in relation to the default buttons. Larger call to action areas like page heros are their main intended use.

Solid Buttons

Button

<a class="btn-mktg-fluid btn-lg-mktg-fluid">Button</a>
<button type="button" class="btn-mktg-fluid btn-lg-mktg-fluid">Button</button>
<input type="button" class="btn-mktg-fluid btn-lg-mktg-fluid" value="Button">

Solid Purple Buttons

Button

<a class="btn-mktg-fluid btn-lg-mktg-fluid btn-purple-mktg-fluid">Button</a>
<button type="button" class="btn-mktg-fluid btn-lg-mktg-fluid btn-purple-mktg-fluid">Button</button>
<input type="button" class="btn-mktg-fluid btn-lg-mktg-fluid btn-purple-mktg-fluid" value="Button">

Outlined Buttons

Button

<a class="btn-mktg-fluid btn-lg-mktg-fluid btn-outline-mktg-fluid">Button</a>
<button class="btn-mktg-fluid btn-lg-mktg-fluid btn-outline-mktg-fluid">Button</button>
<input type="button" class="btn-mktg-fluid btn-lg-mktg-fluid btn-outline-mktg-fluid" value="Button">

Outlined Purple Buttons

Button

<a class="btn-mktg-fluid btn-lg-mktg-fluid btn-purple-outline-mktg-fluid">Button</a>
<button type="button" class="btn-mktg-fluid btn-lg-mktg-fluid btn-purple-outline-mktg-fluid">Button</button>
<input type="Button" class="btn-mktg-fluid btn-lg-mktg-fluid btn-purple-outline-mktg-fluid" value="Button">

Outlined White Buttons

Button
<a class="btn-mktg-fluid btn-lg-mktg-fluid btn-white-outline-mktg-fluid">Button</a>
<button type="button" class="btn-mktg-fluid btn-lg-mktg-fluid btn-white-outline-mktg-fluid">Button</button>
<input type="Button" class="btn-mktg-fluid btn-lg-mktg-fluid btn-white-outline-mktg-fluid" value="Button">

Invisible Buttons

These are intended to be used as secondary calls to action with the same top and bottom padding as buttons so they will vertically align with buttons using other button style variants.

Button

<a class="btn-invisible-mktg-fluid btn-lg-mktg-fluid">Button</a>
<button type="button" class="btn-invisible-mktg-fluid btn-lg-mktg-fluid">Button</button>
<input type="Button" class="btn-invisible-mktg-fluid btn-lg-mktg-fluid" value="Button">

Invisible Purple Buttons

Button

<a class="btn-invisible-mktg-fluid btn-lg-mktg-fluid btn-purple-mktg-fluid">Button</a>
<button type="button" class="btn-invisible-mktg-fluid btn-lg-mktg-fluid btn-purple-mktg-fluid">Button</button>
<input type="Button" class="btn-invisible-mktg-fluid btn-lg-mktg-fluid btn-purple-mktg-fluid" value="Button">