--- layout: default ---

# how to use it? #

{% highlight scss %} @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 */ ); } {% endhighlight %}
{% highlight scss %} .button { @include mix-button(); } {% endhighlight %}

# ghost buttons #

{% highlight scss %} .btn-ghost { @include mix-button(#8cd1a8, #fff, 0, 300, capitalize, true); } {% endhighlight %}
{% highlight scss %} .btn-ghost-primary { @include mix-button(#8cd1a8, #8cd1a8, 0, 700, capitalize, true); } {% endhighlight %}

# custom text-transform #

{% highlight scss %} .btn-ghost-upper { @include mix-button(#8cd1a8, #fff, 0, 500, uppercase, true); } .btn-ghost-lower { @include mix-button(#8cd1a8, #fff, 0, 500, lowercase, true); } {% endhighlight %}
{% highlight scss %} .btn-blue { @include mix-button(#4696e5, #fff, 0, 700); } {% endhighlight %}
{% highlight scss %} .btn-ghost-blue { @include mix-button(#4696e5, #4696e5, 0, 500, capitalize, true); } {% endhighlight %}

# custom border-radius #

# custom your palette colors #

# small size #

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

# big size #

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