KNACSS/sass/components/buttons.scss

/* ----------------------------- */
/* ==Buttons                     */
/* ----------------------------- */
/* preferably use <button> for buttons !*/
/* use .btn-- or .button-- classes for variants */

%btn {
  display: inline-block;
  padding: $tiny-value $small-value;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  color: $color-base;
  background-color: $color-muted;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: 0.25s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition-property: box-shadow, background-color, color, border;
}

.btn,
.button,
[type="button"],
button {
  @extend %btn;

  &:focus {
    -webkit-tap-highlight-color: transparent;
  }
}

// button color variants
// name - background-color - color - border
$buttons-variants: (
  (primary,    $color-primary,    $color-light,    none),
  (success,    $color-success,    $color-light,    none),
  (info,       $color-info,       $color-light,    none),
  (warning,    $color-warning,    $color-light,    none),
  (danger,     $color-danger,     $color-light,    none),
  (inverse,    $color-inverse,    $color-light,    none),
  (ghost,      $color-ghost,      $color-light,    0 0 0 1px $color-light inset)
);

.btn,
.button {
  @each $name, $background-color, $color, $border in $buttons-variants {
    &--#{$name} {
      @extend %btn;
      background-color: $background-color;
      color: $color;
      box-shadow: $border;

      &:active,
      &:focus,
      &:hover {
        background-color: darken( $background-color, 10% );
      }
    }
  }
}

// button state variants
.btn,
.button {
  &--small {
    font-size: $base-font-size - 0.4rem;
  }

  &--big {
    font-size: $base-font-size + 0.4rem;
  }

  &--block {
    width: 100% !important;
    display: block;
  }
}

/* disabled buttons */
.btn,
.button,
[type="button"],
[type="reset"],
[type="submit"],
button {
  &.disabled,
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

/* unstyled buttons */
.btn,
.button,
[type="button"],
[type="reset"],
[type="submit"],
button {
  &.unstyled {
    padding: 0;
    border: none;
    text-align: left;
    background: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    &:focus {
      box-shadow: none;
      outline: none;
    }
  }
}