Example with no configuration

Input

.your-button {
  /* Short-hand syntax example */

  /* color: default | active | hover */
  button-color: skyblue white white;

  /* background-color: default | active | hover */
  button-background: white skyblue silver;

  /* border: width | 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-classes: active disabled;
}

Output

.your-button,
.your-button:visited {
  cursor: pointer;
  text-decoration: none;
  border: none;
  display: inline-block;
  color: skyblue;
  background-color: white;
  box-shadow: inset 0 0 0 4px skyblue;
}

.your-button:active,
.your-button.active {
  color: white;
  background-color: skyblue;
  box-shadow: inset 0 0 0 4px skyblue;
}

.your-button:hover,
.your-button.active:hover {
  color: white;
  background-color: silver;
  box-shadow: inset 0 0 0 4px silver;
}

.your-button:disabled,
.your-button:disabled:active,
.your-button:disabled:hover,
.your-button.disabled,
.your-button.disabled:active,
.your-button.disabled:hover {
  opacity: 0.25;
  cursor: default;
  color: skyblue;
  background-color: white;
  box-shadow: inset 0 0 0 4px skyblue;
}

Example with a configuration

Input

/* Define global settings */

@button test {
  /* Detailed syntax example */

  /* Color */
  button-color: orangered;
  button-color-active: whitesmoke;
  button-color-hover: whitesmoke;

  /* Background color */
  button-background-color: white;
  button-background-color-active: silver;
  button-background-color-hover: orangered;

  /* Border */
  button-border-width: 1px;
  button-border-color: silver;
  button-border-color-active: silver;
  button-border-color-hover: orangered;

  /* Classes */
  button-class-active: active;
  button-class-disabled: disabled;
  button-class-parent: false;
}

/* Apply settings */

.my-button {
  button: test;
}

Output

.my-button,
.my-button:visited {
  cursor: pointer;
  text-decoration: none;
  border: none;
  display: inline-block;
  color: orangered;
  background-color: white;
  box-shadow: inset 0 0 0 1px silver;
}

.my-button:active,
.my-button.active {
  color: whitesmoke;
  background-color: silver;
  box-shadow: inset 0 0 0 1px silver;
}

.my-button:hover,
.my-button.active:hover {
  color: whitesmoke;
  background-color: orangered;
  box-shadow: inset 0 0 0 1px orangered;
}

.my-button:disabled,
.my-button:disabled:active,
.my-button:disabled:hover,
.my-button.disabled,
.my-button.disabled:active,
.my-button.disabled:hover {
  opacity: 0.25;
  cursor: default;
  color: orangered;
  background-color: white;
  box-shadow: inset 0 0 0 1px silver;
}