1. Home Icon
  2. Web Style Guide
  3. Buttons

Web Style Guide

Buttons

Buttons are used throughout the site, but when using buttons it is important to limit their usage on a single page, especially primary buttons (red buttons). Buttons should be used as the primary call to action and their use should remain focused.

You can use button classes (ie btn, btn-primary, btn-default, etc.) on an <a>, <button>, or <input> element.

Button Color

For PCC we are using four button styles — default, dark, light and primary. Primary should only be used sparingly and only for explicit call to action. For instance, if you have an Apply page, primary button could be used for Apply Now, but Get More Info button should use default or dark styling.

Apply Now
<a href="#" class="btn btn-primary">Button Text</a>
Get More Info
<a href="#" class="btn btn-default">Button Text</a>

<a href="#" class="btn btn-light">Button Text</a>
Get More Info
<a href="#" class="btn btn-drk">Button Text</a>

Button Sizes

There are four available sizes of buttons. Make sure you are consistent in you button use and don't have a bunch of buttons of various sizes. Also not all buttons need to be large.

Button with Icon

Using Font Awesome we can create buttons with icons.


Block Level Buttons

These type of buttons may be useful for end of long forms, in conjunction with certain components or in widgets. Essentially block level = full width of the container space.

All you have to do is add the class btn-block.

Lebowski ipsum please see him, Jeffrey. He's a good man. And thorough. Dolor sit amet, consectetur adipiscing elit praesent. What in God's holy name are you blathering about? Ac magna justo pellentesque ac lectus. Near the In-and-Out Burger. Quis elit blandit fringilla a ut turpis. Nice marmot. Praesent felis ligula, malesuada suscipit malesuada non, ultrices non urna sed orci ipsum. Mr. Lebowski is in seclusion in the West Wing. Placerat id condimentum rutrum, rhoncus ac.

Block Level Button Block Level Button 2
Back to Style Guide Home