layout: default


<div class=“bg-blue bg-full”>

<h2># how to use it? #</h2>

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

</div>

<div class=“bg-full”>

<button class="button">Button default</button>

{% highlight scss %} .button {

@include mix-button();

} {% endhighlight %}

</div>

<div class=“bg-full bg-gray”>

<h2># ghost buttons #</h2>

<button class="btn-ghost">Ghost</button>

{% highlight scss %} .btn-ghost {

@include mix-button(#8cd1a8, #fff, 0, 300, capitalize, true);

} {% endhighlight %}

</div>

<div class=“bg-full”>

<button class="btn-ghost-primary">Ghost primary</button>

{% highlight scss %} .btn-ghost-primary {

@include mix-button(#8cd1a8, #8cd1a8, 0, 700, capitalize, true);

} {% endhighlight %}

</div>

<div class=“bg-full bg-blue”>

<h2># custom text-transform #</h2>

<button class="btn-ghost-upper">uppercase</button>
<button class="btn-ghost-lower">lowercase</button>

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

</div>

<div class=“bg-full bg-silver”>

<button class="btn-blue">Button Blue</button>

{% highlight scss %} .btn-blue {

@include mix-button(#4696e5, #fff, 0, 700);

} {% endhighlight %}

</div>

<div class=“bg-full”>

<button class="btn-ghost-blue">Ghost Blue</button>

{% highlight scss %} .btn-ghost-blue {

@include mix-button(#4696e5, #4696e5, 0, 500, capitalize, true);

} {% endhighlight %}

</div>

<div class=“bg-full bg-silver”>

<h2># custom border-radius #</h2>
<button class="button-no-round">no-round</button>
<button class="button-round">round</button>
<button class="button-rounded">rounded</button>

</div>

<div class=“bg-full bg-gray”>

<h2># custom your palette colors #</h2>
<button class="btn-dark-blue">Dark Blue</button>
<button class="btn-green">Green</button>
<button class="btn-lime-green">Lime Green</button>
<button class="btn-violet">Violet</button>
<button class="btn-crimson">Crimson</button>
<button class="btn-aqua">Aqua</button>
<button class="btn-coral">Coral</button>
<button class="btn-gold">Gold</button>

</div>

<div class=“bg-full”>

<h2># small size #</h2>
<button class="btn-dark-blue btn-small">Dark Blue</button>
<button class="btn-green btn-small">Green</button>
<button class="btn-lime-green btn-small">Lime Green</button>
<button class="btn-violet btn-small">Violet</button>
<button class="btn-crimson btn-small">Crimson</button>
<button class="btn-aqua btn-small">Aqua</button>
<button class="btn-coral btn-small">Coral</button>
<button class="btn-gold btn-small">Gold</button>

{% highlight scss %} .btn-small {

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

} {% endhighlight %}

</div>

<div class=“bg-full bg-silver”>

<h2># big size #</h2>
<button class="btn-green btn-big">Green</button>
<button class="btn-lime-green btn-big">Lime Green</button>
<button class="btn-violet btn-big">Violet</button>
<button class="btn-coral btn-big">Coral</button>

{% highlight scss %} .btn-big {

@include mix-button-size(3em, 3em, 1.2rem);

} {% endhighlight %} </div>