postcss-button

postcss-button

francoisromain.github.io/postcss-button

A PostCSS plugin to create buttons.

---

Installation

Install the npm package:

$ npm install postcss-button --save-dev

Require the PostCSS plugin:

postcss([ require('postcss-button') ])

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

---

Configuration (optional)

@button ([name]) {
  color: grey;
  background-color: white;
  color-active: white;
  background-color-active: grey;
  border-width: 0;
  border-style: none;
  border-color: grey;
  border-color-active: black;
  class-active: active;
  class-disabled: disabled;
}

• name (optional): custom identifier. If no name is provided, the default settings are overwritten.

---

Usage

Name

button: [name]

• name: string identifier referring to a settings atRule. Set to default to use default settings.

Colors

button-color: [color] ([background-color]) ([color-active]) ([background-color-active]);

• color: button text color.
• background-color (optional): button background color.
• color-active (optional): button text color on mouseover.
• background-color (optional): button background color on mouseover.

Border

button-border: [width] ([border-color]) ([border-color-active])

• width: width of the border.
• border-color (optional): color of the border.
• border-color-active (optional): color of the border on mouseover.

Classes

button-classes: [active] ([disabled])

• active: class name to apply the active styles.
• disabled (optional): class name to apply the disabled styles.

Missing declarations fallback to the default settings.

---

Examples

There are two ways of declaring a button:

With a name referring to an atRule declaration

@button big-button {
  color: grey;
  background-color: white;
  color-active: white;
  background-color-active: grey;
  border-width: 0;
  border-style: none;
  border-color: grey;
  border-color-active: black;
  class-active: active;
  class-disabled: disabled;
}

.my-button {
  button: big-button;
}

With specific declarations

.my-button {
  button-color: grey white white orange;
  button-border: 2px orange white;
  button-classes: active diabled;
}

01: input, output, markup, demo

02: input, output, markup, demo