CSS Toolkit - button

A CSS Toolkit module that provides a common structural button template styles to be extended with modifier classes.

Installation

• npm: npm install css-toolkit-button

Available classes

• button - [core] The core button component
• disabled - [state] For disabled-state button styles

Note: You must also include the disabled attribute on button elements.

Configuration

Adjust the custom properties to change the base defaults using postcss-custom-properties. For Example:

• --button-padding: .4rem .75rem;
• --button-font: inherit;
• --button-color: inherit;
• --button-border-width: 1px;
• --button-border-color: currentColor;
• --button-disabled-opacity: .65;

Use

Examples:

<a class="button" href="#link">Sign up</a>

<button class="button button-default disabled" type="button" disabled>Close</button>

Theming / extending

As the module focuses on common structural styles, You can build your website-specific theme styles in your build process. For example:

@import "css-toolkit-button";

/*
 * Modifier: default buttons
 */

.button-default {
  color: #444;
  background-color: #eee;
  border-color: #d9d9d9 #d9d9d9 #ccc;
  border-radius: .125rem;
}

.button-default:hover,
.button-default:focus,
.button-default:active {
  color: #222;
  background-color: #f5f5f5;
  border-color: #c6c6c6 #c6c6c6 #bbb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.button-default:focus {
  border-color: #069;
  outline: 0;
}

.button-default:active {
  background-color: #ccc;
  box-shadow: inset 0 1px 2px rgba(0,0,0, 0.2);
}

/*
 * Modifier: large buttons
 */

.button-lg {
  padding: .75rem 1.5rem;
  font-size: 1.5rem;
}

Testing

Install Node (comes with npm).

npm install

To generate a build:

npm run build

Basic visual tests are in test/index.html.

Browser support

• Edge
• Firefox
• Google Chrome
• Internet Explorer 11+
• Opera
• Safari