A PostCSS plugin to create buttons.

This plugin outputs a lot of the repetitive css code necessary to create clean buttons. It also uses box-shadow to create borders which does not break the vertical rhythm.

Examples

There are two ways to declare a button:

With specific declarations

.my-button-class {
  /* short-hand syntax example */
  /* color: default | active | hover */
  button-color: skyblue white white;
  /* background-color: default | active | hover */
  button-background: white skyblue silver;
  /* border: size | default | active | hover */
  button-border: 4px skyblue skyblue silver;
  /* classes: active class name | disabled class name | apply classes and pseudo classes to the parent selector */
  button-class: active disabled true;
}

With a configuration

@button my-button-name {
  /* detailed-syntax example */
  /* color */
  button-color: orange;
  button-color-active: white;
  button-color-hover: white;
  /* background-color */
  button-background-color: white;
  button-background-color-active: silver;
  button-background-color-hover: orange;
  /* border */
  button-border-width: 1px;
  button-border-color: silver;
  button-border-color-active: silver;
  button-border-color-hover: orange;
  /* classes */
  button-class-active: active;
  button-class-disabled: disabled;
  button-class-parent: true;
}

.my-button-class {
  button: my-button-name;
}

01: input, output, markup, demo

02: input, output, markup, demo

Installation

Install the npm package:

npm install --save-dev postcss postcss-button

Require the PostCSS plugin:

postcss([require("postcss-button")]);

See PostCSS docs to setup with Gulp, Grunt, Webpack, npm scripts…

Usage

With a configuration (optional)

@button ([name]) {
  /* name is a custom identifier to use multiple configurations.
  If no name is provided, the default settings are overwritten */
  [button-css-rules…]
}
.my-class {
  button: [name];
  /* use 'default' to apply the default settings */
}

Without a configuration

.my-class {
  [button-css-rules…]
}

Css rules

Color

/* Button text color when active */
button-color-active: [color];
/* button text color on hover */
button-color-hover: [color];
/* short-hand syntax */
button-color: [color] ([color-active]) ([color-hover]);

Background color

/* button background color when active */
button-background-active: [color];
/* button background color on hover */
button-background-hover: [color];
/* short-hand syntax */
button-background: [background-color] ([background-color-active])
  ([background-color-hover]);

Border

/* width and units of the border */
button-border-width: [width];
/* color of the border */
button-border-color: [color];
/* color of the border when active */
button-border-color-active: [color];
/* color of the border on hover */
button-border-color-hover: [color];
/* short-hand syntax */
button-border: [border-width] ([border-color]) ([border-color-active])
  ([border-color-hover]);

Classes

/* class name to apply the active styles */
button-class-active: [class-name];
/* class name to apply the disabled styles */
button-class-disabled: [class-name];
/* apply the classes and pseudo elements
to the parent element in the selector chain
if it exists. (default to false)
(See test 07 and 08) */
button-class-parent: [boolean];
/* short-hand syntax */
button-class: [active] ([disabled]) ([parent]);

Missing declarations fallback to the default settings.