Mix Buttons

SASS Mixins for generate beautiful buttons

# how to use it? #

@import "mix-buttons";

.my-button {
  @include mix-button(
    $custom-font-color, /* default is #fff */
    $custom-background-color, /* default is #8cd1a8 */
    $custom-border-radius, /* default is 2px */
    $custom-font-weight, /* default is 600 */
    $custom-text-transform, /* default is capitalize */
    $boolean-is-button-ghost /* default is false */
  );
}

.button {
  @include mix-button();
}

# ghost buttons #

.btn-ghost {
  @include mix-button(#8cd1a8, #fff, 0, 300, capitalize, true);
}

.btn-ghost-primary {
  @include mix-button(#8cd1a8, #8cd1a8, 0, 700, capitalize, true);
}

# custom text-transform #

.btn-ghost-upper {
  @include mix-button(#8cd1a8, #fff, 0, 500, uppercase, true);
}
.btn-ghost-lower {
  @include mix-button(#8cd1a8, #fff, 0, 500, lowercase, true);
}

.btn-blue {
  @include mix-button(#4696e5, #fff, 0, 700);
}

.btn-ghost-blue {
  @include mix-button(#4696e5, #4696e5, 0, 500, capitalize, true);
}

# custom border-radius #

# custom your palette colors #

# small size #

.btn-small {
  @include mix-button-size(2em, 1.2em, .8rem);
}

# big size #

.btn-big {
  @include mix-button-size(3em, 3em, 1.2rem);
}