Buttons

Here are some examples of default styles for buttons, and also some examples of class modifiers you can use for a consistent look with common button usage.

Button

This is the default style applied to all buttons, it also displays the disabled state.

Example

Usage

<button>Enabled<button>
<button disabled>Disabled<button>

Button States

When color styles are applied to buttons the disabled state does not inherit the background color. The disabled state can be set using the disabled attribute or by applying the class .disabled.

Example

Usage

<button class="green">Yes<button>
<button>No<button>
<br>
<button class="green" disabled>Yes<button>
<button disabled>No<button>

Example 3

There are two classes that can be applied to buttons for use with a yes/no type of response. These classes are .confirm and .cancel and they add an icon to the button.

Usage

<button class="confirm green">Yes<button>
<button class="cancel">No<button>
<br>
<button class="confirm green" disabled>Yes<button>
<button class="cancel" disabled>No<button>

Example 4

There are five predefined colors that can be applied to buttons. If you add the class .red, .orange, .yellow, .green, or .blue, then the button will be styled with that color scheme.

Usage

<button class="red">Red<button>
<button class="orange">Orange<button>
<button class="yellow">Yellow<button>
<button class="green">Green<button>
<button class="blue">Blue<button>
<br>
<button class="red" disabled>Red<button>
<button class="orange" disabled>Orange<button>
<button class="yellow" disabled>Yellow<button>
<button class="green" disabled>Green<button>
<button class="blue" disabled>Blue<button>

Button Groups

To group together buttons in a navigation style list, use this markup.

Example

Usage

<nav class="button-group">
  <button>List</button>
  <button class="selected">Map</button>
  <button class="selected">Settings</button>
</nav>
<nav class="button-group">
  <button class="blue">List</button>
  <button class="blue">Map</button>
  <button class="blue selected">Settings</button>
</nav>
<nav class="button-group">
  <button class="green">List</button>
  <button class="green">Map</button>
  <button class="green">Settings</button>
</nav>
<nav class="button-group">
  <button class="yellow">List</button>
  <button class="yellow">Map</button>
  <button class="yellow" disabled>Settings</button>
</nav>
<nav class="button-group">
  <button class="orange">List</button>
  <button class="orange">Map</button>
  <button class="orange" disabled>Settings</button>
</nav>
<nav class="button-group">
  <button class="red">List</button>
  <button class="red">Map</button>
  <button class="red" disabled>Settings</button>
</nav>