Buttons are based on the most basic and reused styling in Kickstart. They can easily be placed in navbars and other elements, and can be extended in functionality via dropdowns and sizing.

Buttons can be created from several elements:

<button class="signup">Sign up</button>
<a href="#" class="signup">Sign up</a>
<input type="submit" class="signup" value="Sign up" />

.signup {
  @include button();
}

<button class="button">Sign up</button>
<a href="#" class="button">Sign up</a>
<input type="submit" class="button" value="Sign up" />

Colors

For colored buttons, simply add the .button- class of one of the primary colors to the .button class.

Available colors include:

button-red
button-orange
button-yellow
button-green
button-blue
button-violet

You may also use your theme's primary and secondary colors via button-primary and button-secondary

For colored buttons, simply pass in a color to button().

If you have already defined the element as a button, it is better to use the button-color() mixin. This is the same mixin used from inside of button(). Using this method avoids repetitive CSS.

<button class="button button-green">Send</button>
<button class="button button-red">Delete</button>
<button class="button button-blue">Info</button>
<button class="button">Cancel</button>

<button class="send">Send</button>
<button class="delete">Delete</button>
<button class="info">Info</button>
<button class="cancel">Cancel</button>

.send {
  @include button(map-get($colors, green));
}
.delete {
  @include button(map-get($colors, red));
}
.info {
  @include button();
  @include button-color('#6495ed');
  // Just to show an example of button-color().
  // The color could also be passed in to the $color
  // parameter of button()
}
.cancel {
  @include button();
}

Groups

Button groups are nothing more than <ul>s with button styling applied to each <li>. Border rounding is automatically removed on sandwiched buttons.

This is also used to create dropdown buttons.

<ul class="button-group" role="button">
  <li>
    <a href="#">Create</a>
  </li>
  <li>
    <a href="#">Read</a>
  </li>
  <li>
    <a href="#">Update</a>
  </li>
  <li>
    <a href="#">Delete</a>
  </li>
</ul>

.button-group {
  @include button-group();
}

Button with dropdown

This is a bit different from the above only because the button still exists with the dropdown instead of as one.

Use roles Especially in navigation bars, it's important to use role="button" in the HTML attributes.

Important! The .button-dropdown class is a required class

<ul class="button-group" role="button">
  <li>
    <a href="#">Upload</a>
  </li>
  <li>
    <button class="button-dropdown"></button>
    <ul>
      <li>
        <a href="#">Choose from library</a>
      </li>
      <li>
        <a href="#">Take a picture</a>
      </li>
    </ul>
  </li>
</ul>

.button-group {
  @include button-group();
}

Dropdown button

Dropdown buttons are simply collapsible lists that look like buttons.

Use roles Especially in navigation bars, it's important to use role="button" in the HTML attributes.

Use the button element. Unlike regular buttons, dropdown buttons must actually be created with the <button> element.

<button class="button" role="button">
  Add photo
  <ul>
    <li>
      <a href="#">Upload</a>
    </li>
    <li>
      <a href="#">Choose from library</a>
    </li>
    <li>
      <a href="#">Take a picture</a>
    </li>
  </ul>
</button>

.button {
  @include button();
}

Sizes

Button sizes are expressed as a multiple of the button's current size. For example, a size of 2 would be 2x the size of a default button.

If you have already defined this element as a button, it is better to use the button-size() mixin. This is the same mixin called from inside of button() to generate sizing styles. Using this method avoids duplicate CSS.

Use button-small or button-large for large and small buttons.

 .button {
   @include button($size: 1); // Default size
 }
 .button.button-large
   @include button-size(1.2); // Large
 }
 .button.button-small
   @include button-size(0.85); // Small
 }

<button class="button button-large">Large</button>
<button class="button">Regular</button>
<button class="button button-small">Small</button>

<ul class="button-group button-large">
  <li>
    <button class="button">Large</button>
  </li>
  <li>
    <button class="button-dropdown"></button>
    <ul>
      ...
    </ul>
</ul>

<ul class="button-group">
  <li>
    <button class="button">Regular</button>
  </li>
  <li>
    <button class="button-dropdown"></button>
    <ul>
      ...
    </ul>
</ul>

<ul class="button-group button-small">
  <li>
    <button class="button">Small</button>
  </li>
  <li>
    <button class="button-dropdown"></button>
    <ul>
      ...
    </ul>
</ul>

<button class="button button-large">
  Large
  <ul class="button-dropdown">
    ...
  </ul>
</button>

<button class="button">
  Regular
  <ul class="button-dropdown">
    ...
  </ul>
</button>

<button class="button button-small">
  Small
  <ul class="button-dropdown">
    ...
  </ul>
</button>

Mixing

Mix colors, sizes, and button types.

// See above examples for markup

To specify a both a color and size, specify a scale for $size (1 = 100%) and a color for $background-color

 .button.button-large
   @include button($background-color: #EEEEEE, $size: 1.2); // Large
 }