Contents

<section id="buttons">
  <h2>Buttons <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_button.scss">View source</a></h2>
  <p>The button add-on provides well-designed buttons with a single line in your CSS.</p>
  <p>The mixin supports a style parameter and an optional color argument. The available button styles are:</p>
  <ul>
    <li>
      <code>simple</code> (default)
    </li>
    <li>
      <code>shiny</code>
    </li>
    <li>
      <code>pill</code>
    </li>
  </ul>

  <section class="demo">
    <div class="wrapper">
      <h3>Simple Button Style</h3>
      <p>The mixin can be called with no arguments, which will render a blue button with the <code>simple</code> style.</p>
{% highlight scss %}
button {
  @include button;
}
{% endhighlight %}
      <button class="example-1">Simple button</button>
    </div>

    <div class="wrapper">
      <h3>Pill Button Style</h3>
{% highlight scss %}
button {
  @include button(pill);
}
{% endhighlight %}
      <button class="example-2">Pill Button</button>
    </div>

    <div class="wrapper">
      <h3>Shiny Button Style</h3>
      <p>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.</p>

{% highlight scss %}
button {
  @include button(shiny, #ff0000);
}
{% endhighlight %}
      <button class="example-3">Shiny Button</button>
    </div>
  </section>

</section>

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
bourbon-2.1.0	_includes/buttons.html