SASS Mixins for generate beautiful buttons
@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(); }
.btn-ghost { @include mix-button(#8cd1a8, #fff, 0, 300, capitalize, true); }
.btn-ghost-primary { @include mix-button(#8cd1a8, #8cd1a8, 0, 700, capitalize, true); }
.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); }
.btn-small { @include mix-button-size(2em, 1.2em, .8rem); }
.btn-big { @include mix-button-size(3em, 3em, 1.2rem); }