basscss-color-buttons

Basscss Color Buttons

Button color styles module for Basscss

basscss.com

Basscss includes the following basic button styles: .button-blue, .button-gray, .button-blue-outline, and .button-red. Customize these styles to suite your needs.

<div class="mb1">
  <button>Button</button>
  <a href="#!" class="button">Link Button</a>
  <input type="button" class="button" value="Input Button">
</div>
<div class="mb1">
  <button class="button-blue mb1">Button Blue</button>
  <button class="button-blue-outline mb1">Button Blue Outline</button>
  <button class="button-gray mb1">Button Gray</button>
  <button class="button-red mb1">Button Red</button>
</div>

Button styles can be used for navigation. The .button-nav-light style adds a subtle hover effect for links on a light background.

<div class="mxn1">
  <a href="#!" class="button button-narrow button-nav-light">Burgers</a>
  <a href="#!" class="button button-narrow button-nav-light">Fries</a>
  <a href="#!" class="button button-narrow button-nav-light">Shakes</a>
  <a href="#!" class="button button-narrow button-nav-light">Onion Rings</a>
</div>

For dark backgrounds, use the .button-nav-dark style.

<div class="bg-dark-gray">
  <a href="#!" class="button button-narrow button-nav-dark">Burgers</a>
  <a href="#!" class="button button-narrow button-nav-dark">Fries</a>
  <a href="#!" class="button button-narrow button-nav-dark">Shakes</a>
  <a href="#!" class="button button-narrow button-nav-dark">Onion Rings</a>
</div>