---
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 %}