Base Reset Base Typography Base Forms Base Buttons Base Tables Utility Layout Utility Typography Utility White Space Utility Responsive States UI Utility Button Sizes UI Utility Groups UI Utility Disclosure States Positions Grid Table Object Color Base Color Forms Color Forms Dark Color Tables Color Buttons Colors Color Borders Flex Object Utility Headings Background Images

# basscss-color-buttons v0.1.1

# Color Buttons

NPM Github

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.

Link Button

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

Burgers Fries Shakes Onion Rings

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

Burgers Fries Shakes Onion Rings

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