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.
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.
<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">
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>
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>
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>
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>
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>