Buttons - Styles | Crossroads Digital Design Kit

UI Components / Buttons

Button patterns help solicit action from a user in a clean and consistent manner. These elements are commonly used to submit a form or direct a user's attention towards a primary call-to-action.

Button tags

Use the button classes on an <a>, <button>, or <input> element.

onclick="return false" has been added to all link tag selectors to prevent the page from refreshing. This line of code is not necessarily needed for your project.

Link
<a class="btn btn-blue" href="#" role="button">Link</a>
<button class="btn btn-blue" type="button">Button</button>
<input class="btn btn-blue" value="Input" type="button">
<input class="btn btn-blue" value="Submit" type="submit">

Solid Color Options

Use the .btn-* classes on any element with a .btn class to change that button element's color.

For obvious reasons, the .btn-white style button works best on a dark background. All of the following white button examples have been given a wrapper with a dark background (and some minor padding for aesthetic reasons).

<button class="btn btn-blue" type="button">Blue Primary</button>
<button class="btn btn-orange" type="button">Orange Primary</button>
<button class="btn btn-gray" type="button">Gray Primary</button>
<button class="btn btn-gray-light" type="button">Gray Light Primary</button>
<p class="bg-charcoal soft-quarter">
  <button class="btn btn-white" type="button">White Primary</button>
</p>

Outline Color Options

Adding a class of .btn-outline to any .btn element will invert the text and background colors, creating an outline effect.

<button class="btn btn-blue btn-outline" type="button">Blue Secondary</button>
<button class="btn btn-orange btn-outline" type="button">Orange Secondary</button>
<button class="btn btn-gray btn-outline" type="button">Gray Secondary</button>
<button class="btn btn-gray-light btn-outline" type="button">Gray Light Secondary</button>
<p class="bg-charcoal soft-quarter">
  <button class="btn btn-white btn-outline" type="button">White Secondary</button>
</p>

Link Style Options

There are two flavors of link-style buttons, a primary style and a secondary style. To create a link-style button, add a class of .btn-link to your button element.

<button class="btn btn-link" type="button">Link Primary</button>
<button class="btn btn-link secondary" type="button">Link Secondary</button>

Sizes

Adding .btn-lg or .btn-sm will increase or decrease your button element.

<p>
  <button class="btn btn-blue btn-lg" type="button">Large Button</button>
  <button class="btn btn-blue btn-outline btn-lg" type="button">Large Button</button>
</p>
<p>
  <button class="btn btn-blue" type="button">Button</button>
  <button class="btn btn-blue btn-outline" type="button">Button</button>
</p>
<p>
  <button class="btn btn-blue btn-sm" type="button">Small Button</button>
  <button class="btn btn-blue btn-outline btn-sm" type="button">Small Button</button>
</p>

Block Display Buttons

To create a block level button, which spans the width of its parent, add a class of .btn-block.

<button class="btn btn-blue btn-block" type="button">Button</button>
<button class="btn btn-blue btn-outline btn-block" type="button">Button</button>