Buttons View source

The button add-on provides well-designed buttons with a single line in your CSS.

The mixin supports a style parameter and an optional color argument. The available button styles are:

Simple Button Style

The mixin can be called with no arguments, which will render a blue button with the simple style.

{% highlight scss %} button { @include button; } {% endhighlight %}

Pill Button Style

{% highlight scss %} button { @include button(pill); } {% endhighlight %}

Shiny Button Style

Create beautiful buttons by defining a style and color argument; using a single color, the mixin calculates the gradient, borders, box shadow, text shadow and text color of the button. The mixin will change the text to be light when on a dark background, and dark when on a light background.

{% highlight scss %} button { @include button(shiny, #ff0000); } {% endhighlight %}