You are viewing the deprecated 0.5.1 version of the website. Click here to view the latest version

Documentation

Everything you need to create a website with Bulma

# Buttons

## The classic button, in different colors, sizes, and states

Colors Yes
Sizes Yes
Variables Yes

Button

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

### Colors #

White Light Dark Black Link

    <a class="button is-white">White</a>
    <a class="button is-light">Light</a>
    <a class="button is-dark">Dark</a>
    <a class="button is-black">Black</a>
    <a class="button is-link">Link</a>

Primary Info Success Warning Danger

    <a class="button is-primary">Primary</a>
    <a class="button is-info">Info</a>
    <a class="button is-success">Success</a>
    <a class="button is-warning">Warning</a>
    <a class="button is-danger">Danger</a>

### Sizes #

Small Normal Medium Large

    <a class="button is-small">Small</a>
    <a class="button">Normal</a>
    <a class="button is-medium">Medium</a>
    <a class="button is-large">Large</a>

### Styles

#### Outlined

Outlined Outlined Outlined Outlined Outlined

    <a class="button is-outlined">Outlined</a>
    <a class="button is-primary is-outlined">Outlined</a>
    <a class="button is-info is-outlined">Outlined</a>
    <a class="button is-success is-outlined">Outlined</a>
    <a class="button is-danger is-outlined">Outlined</a>

#### Inverted (the text color becomes the background color, and vice-versa)

Inverted Inverted Inverted Inverted

    <a class="button is-primary is-inverted">Inverted</a>
    <a class="button is-info is-inverted">Inverted</a>
    <a class="button is-success is-inverted">Inverted</a>
    <a class="button is-danger is-inverted">Inverted</a>

#### Invert Outlined (the invert color becomes the text and border colors)

Invert Outlined Invert Outlined Invert Outlined Invert Outlined

    <a class="button is-primary is-inverted is-outlined">Invert Outlined</a>
    <a class="button is-info is-inverted is-outlined">Invert Outlined</a>
    <a class="button is-success is-inverted is-outlined">Invert Outlined</a>
    <a class="button is-danger is-inverted is-outlined">Invert Outlined</a>

### States

#### Normal

Normal Normal Normal Normal Normal Normal

    <a class="button">Normal</a>
    <a class="button is-primary">Normal</a>
    <a class="button is-info">Normal</a>
    <a class="button is-success">Normal</a>
    <a class="button is-warning">Normal</a>
    <a class="button is-danger">Normal</a>

#### Hover

Hover Hover Hover Hover Hover Hover

    <a class="button is-hovered">Hover</a>
    <a class="button is-primary is-hovered">Hover</a>
    <a class="button is-info is-hovered">Hover</a>
    <a class="button is-success is-hovered">Hover</a>
    <a class="button is-warning is-hovered">Hover</a>
    <a class="button is-danger is-hovered">Hover</a>

#### Focus

Focus Focus Focus Focus Focus Focus

    <a class="button is-focused">Focus</a>
    <a class="button is-primary is-focused">Focus</a>
    <a class="button is-info is-focused">Focus</a>
    <a class="button is-success is-focused">Focus</a>
    <a class="button is-warning is-focused">Focus</a>
    <a class="button is-danger is-focused">Focus</a>

#### Active

Active Active Active Active Active Active

    <a class="button is-active">Active</a>
    <a class="button is-primary is-active">Active</a>
    <a class="button is-info is-active">Active</a>
    <a class="button is-success is-active">Active</a>
    <a class="button is-warning is-active">Active</a>
    <a class="button is-danger is-active">Active</a>

#### Loading

Loading Loading Loading Loading Loading Loading

    <a class="button is-loading">Loading</a>
    <a class="button is-primary is-loading">Loading</a>
    <a class="button is-info is-loading">Loading</a>
    <a class="button is-success is-loading">Loading</a>
    <a class="button is-warning is-loading">Loading</a>
    <a class="button is-danger is-loading">Loading</a>

#### Static

New! 0.4.2

You can create a non-interactive button by using the `is-static` modifier. This is useful to align a text label with an input, for example when using form addons.

Static

    <span class="button is-static">Static</span>

#### Disabled

Disabled Disabled Disabled Disabled Disabled Disabled

The `is-disabled` CSS class has been deprecated in favor of the `disabled` HTML attribute. Learn more

    <a class="button" title="Disabled button" disabled>Disabled</a>
    <a class="button is-primary" title="Disabled button" disabled>Disabled</a>
    <a class="button is-info" title="Disabled button" disabled>Disabled</a>
    <a class="button is-success" title="Disabled button" disabled>Disabled</a>
    <a class="button is-warning" title="Disabled button" disabled>Disabled</a>
    <a class="button is-danger" title="Disabled button" disabled>Disabled</a>

#### With Font Awesome icons

GitHub Twitter Save Delete

GitHub GitHub GitHub GitHub

    <p class="field">
      <a class="button">
        <span class="icon is-small">
          <i class="fa fa-bold"></i>
        </span>
      </a>
      <a class="button">
        <span class="icon is-small">
          <i class="fa fa-italic"></i>
        </span>
      </a>
      <a class="button">
        <span class="icon is-small">
          <i class="fa fa-underline"></i>
        </span>
      </a>
    </p>
    <p class="field">
      <a class="button">
        <span class="icon">
          <i class="fa fa-github"></i>
        </span>
        <span>GitHub</span>
      </a>
      <a class="button is-primary">
        <span class="icon">
          <i class="fa fa-twitter"></i>
        </span>
        <span>Twitter</span>
      </a>
      <a class="button is-success">
        <span class="icon is-small">
          <i class="fa fa-check"></i>
        </span>
        <span>Save</span>
      </a>
      <a class="button is-danger is-outlined">
        <span>Delete</span>
        <span class="icon is-small">
          <i class="fa fa-times"></i>
        </span>
      </a>
    </p>
    <p class="field">
      <a class="button is-small">
        <span class="icon is-small">
          <i class="fa fa-github"></i>
        </span>
        <span>GitHub</span>
      </a>
      <a class="button">
        <span class="icon">
          <i class="fa fa-github"></i>
        </span>
        <span>GitHub</span>
      </a>
      <a class="button is-medium">
        <span class="icon">
          <i class="fa fa-github"></i>
        </span>
        <span>GitHub</span>
      </a>
      <a class="button is-large">
        <span class="icon is-medium">
          <i class="fa fa-github"></i>
        </span>
        <span>GitHub</span>
      </a>
    </p>

New!

If the button only contains an icon, Bulma will make sure the button remains square, no matter the size of the button or of the icon.

    <p class="field">
      <a class="button is-small">
        <span class="icon is-small">
          <i class="fa fa-header"></i>
        </span>
      </a>
    </p>
    <p class="field">
      <a class="button">
        <span class="icon is-small">
          <i class="fa fa-header"></i>
        </span>
      </a>
      <a class="button">
      <span class="icon">
        <i class="fa fa-header"></i>
      </span>
      </a>
    </p>
    <p class="field">
      <a class="button is-medium">
        <span class="icon is-small">
          <i class="fa fa-header"></i>
        </span>
      </a>
      <a class="button is-medium">
      <span class="icon">
        <i class="fa fa-header"></i>
      </span>
      </a>
      <a class="button is-medium">
        <span class="icon is-medium">
          <i class="fa fa-header"></i>
        </span>
      </a>
    </p>
    <p class="field">
      <a class="button is-large">
        <span class="icon is-small">
          <i class="fa fa-header"></i>
        </span>
      </a>
      <a class="button is-large">
      <span class="icon">
        <i class="fa fa-header"></i>
      </span>
      </a>
      <a class="button is-large">
        <span class="icon is-medium">
          <i class="fa fa-header"></i>
        </span>
      </a>
      <a class="button is-large">
        <span class="icon is-large">
          <i class="fa fa-header"></i>
        </span>
      </a>
    </p>

### Button group

If you want to group buttons together, use the `is-grouped` modifier on the `field` container:

Save changes

Cancel

Delete post

    <div class="field is-grouped">
      <p class="control">
        <a class="button is-primary">
          Save changes
        </a>
      </p>
      <p class="control">
        <a class="button">
          Cancel
        </a>
      </p>
      <p class="control">
        <a class="button is-danger">
          Delete post
        </a>
      </p>
    </div>

### Button addons

If you want to use buttons as addons, use the `has-addons` modifier on the `field` container:

Left

Center

Right

    <div class="field has-addons">
      <p class="control">
        <a class="button">
          <span class="icon is-small">
            <i class="fa fa-align-left"></i>
          </span>
          <span>Left</span>
        </a>
      </p>
      <p class="control">
        <a class="button">
          <span class="icon is-small">
            <i class="fa fa-align-center"></i>
          </span>
          <span>Center</span>
        </a>
      </p>
      <p class="control">
        <a class="button">
          <span class="icon is-small">
            <i class="fa fa-align-right"></i>
          </span>
          <span>Right</span>
        </a>
      </p>
    </div>

### Button group with addons

You can group together addons as well:

Bold

Italic

Underline

Left

Center

Right

    <div class="field has-addons">
      <p class="control">
        <a class="button">
          <span class="icon is-small">
            <i class="fa fa-bold"></i>
          </span>
          <span>Bold</span>
        </a>
      </p>
      <p class="control">
        <a class="button">
          <span class="icon is-small">
            <i class="fa fa-italic"></i>
          </span>
          <span>Italic</span>
        </a>
      </p>
      <p class="control">
        <a class="button">
          <span class="icon is-small">
            <i class="fa fa-underline"></i>
          </span>
          <span>Underline</span>
        </a>
      </p>
    </div>

    <div class="field has-addons">
      <p class="control">
        <a class="button">
          <span class="icon is-small">
            <i class="fa fa-align-left"></i>
          </span>
          <span>Left</span>
        </a>
      </p>
      <p class="control">
        <a class="button">
          <span class="icon is-small">
            <i class="fa fa-align-center"></i>
          </span>
          <span>Center</span>
        </a>
      </p>
      <p class="control">
        <a class="button">
          <span class="icon is-small">
            <i class="fa fa-align-right"></i>
          </span>
          <span>Right</span>
        </a>
      </p>
    </div>

### Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name | Default value
--- | ---
Name | Default value
`$button-color` | `$grey-darker`
`$button-background-color` | `$white`
`$button-border-color` | `$grey-lighter`
`$button-hover-color` | `$link-hover`
`$button-hover-border-color` | `$link-hover-border`
`$button-focus-color` | `$link-focus`
`$button-focus-border-color` | `$link-focus-border`
`$button-active-color` | `$link-active`
`$button-active-border-color` | `$link-active-border`
`$button-link-color` | `$text`
`$button-link-hover-background-color` | `$background`
`$button-link-hover-color` | `$text-strong`
`$button-disabled-background-color` | `$white`
`$button-disabled-border-color` | `$grey-lighter`
`$button-disabled-shadow` | `none`
`$button-disabled-opacity` | `0.5`
`$button-static-color` | `$grey`
`$button-static-background-color` | `$white-ter`
`$button-static-border-color` | `$grey-lighter`
`$button-shadow-inset` | `inset 0 1px 2px rgba($black, 0.2)`

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!