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

Color

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

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

Background color

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

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

Border

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

• width: width of the border.
• border-color (optional): color of the border.
• border-color-active (optional): color of the border when active.
• _border-color-hover (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 an atRule declaration

@button big-button {
  border-width: 1px;
  color: orange;
  background-color: white;
  border-color: silver;
  color-hover: white;
  background-color-hover: orange;
  border-color-hover: orange;
  color-active: white;
  background-color-active: silver;
  border-color-active: silver;
  class-active: active;
  class-disabled: disabled;
}

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

With specific declarations

.your-button {
  button-color: skyblue white white;
  button-background: white skyblue silver;
  button-border: 4px skyblue skyblue silver;
  button-classes: active diabled;
}

01: input, output, markup, demo

02: input, output, markup, demo