Button

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

Colors Yes
Sizes Yes
Variables Yes

The button is an essential element of any design. It's meant to look and behave as an interactive element of your page.

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

The .button class can be used on:

  • <a> anchor links
  • <button> form buttons
  • <input type="submit"> submit inputs
  • <input type="reset"> reset inputs
Anchor
<a class="button">Anchor</a>
<button class="button">Button</button>
<input class="button" type="submit" value="Submit input">
<input class="button" type="reset" value="Reset input">

Colors #

<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-text">Text</a>
<a class="button is-primary">Primary</a>
<a class="button is-link">Link</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 #

<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>

Displays #

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

Styles #

Outlined

<a class="button is-outlined">Outlined</a>
<a class="button is-primary is-outlined">Outlined</a>
<a class="button is-link 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)

<a class="button is-primary is-inverted">Inverted</a>
<a class="button is-link 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)

<a class="button is-primary is-inverted is-outlined">Invert Outlined</a>
<a class="button is-link 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>

Rounded buttons

<a class="button is-rounded">Rounded</a>
<a class="button is-primary is-rounded">Rounded</a>
<a class="button is-link is-rounded">Rounded</a>
<a class="button is-info is-rounded">Rounded</a>
<a class="button is-success is-rounded">Rounded</a>
<a class="button is-danger is-rounded">Rounded</a>

States #

Normal

<a class="button">Normal</a>
<a class="button is-primary">Normal</a>
<a class="button is-link">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

<a class="button is-hovered">Hover</a>
<a class="button is-primary is-hovered">Hover</a>
<a class="button is-link 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

<a class="button is-focused">Focus</a>
<a class="button is-primary is-focused">Focus</a>
<a class="button is-link 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

<a class="button is-active">Active</a>
<a class="button is-primary is-active">Active</a>
<a class="button is-link 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

Since the loading spinner is implemented using the :after pseudo-element, it is not supported by the <input type="submit"> element.

<a class="button is-loading">Loading</a>
<a class="button is-primary is-loading">Loading</a>
<a class="button is-link 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

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

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-link" 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

<p class="buttons">
  <a class="button">
    <span class="icon is-small">
      <i class="fas fa-bold"></i>
    </span>
  </a>
  <a class="button">
    <span class="icon is-small">
      <i class="fas fa-italic"></i>
    </span>
  </a>
  <a class="button">
    <span class="icon is-small">
      <i class="fas fa-underline"></i>
    </span>
  </a>
</p>
<p class="buttons">
  <a class="button">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button is-primary">
    <span class="icon">
      <i class="fab fa-twitter"></i>
    </span>
    <span>Twitter</span>
  </a>
  <a class="button is-success">
    <span class="icon is-small">
      <i class="fas 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="fas fa-times"></i>
    </span>
  </a>
</p>
<p class="buttons">
  <a class="button is-small">
    <span class="icon is-small">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button is-medium">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button is-large">
    <span class="icon is-medium">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
</p>

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="buttons">
  <a class="button is-small">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </a>
</p>
<p class="buttons">
  <a class="button">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </a>
  <a class="button">
  <span class="icon">
    <i class="fas fa-heading fa-lg"></i>
  </span>
  </a>
</p>
<p class="buttons">
  <a class="button is-medium">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </a>
  <a class="button is-medium">
  <span class="icon">
    <i class="fas fa-heading fa-lg"></i>
  </span>
  </a>
  <a class="button is-medium">
    <span class="icon is-medium">
      <i class="fas fa-heading fa-2x"></i>
    </span>
  </a>
</p>
<p class="buttons">
  <a class="button is-large">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </a>
  <a class="button is-large">
  <span class="icon">
    <i class="fas fa-heading fa-lg"></i>
  </span>
  </a>
  <a class="button is-large">
    <span class="icon is-medium">
      <i class="fas fa-heading fa-2x"></i>
    </span>
  </a>
</p>

Button group #

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

<div class="field is-grouped">
  <p class="control">
    <a class="button is-link">
      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:

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

Button group with addons #

You can group together addons as well:

<div class="field has-addons">
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-bold"></i>
      </span>
      <span>Bold</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-italic"></i>
      </span>
      <span>Italic</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas 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="fas fa-align-left"></i>
      </span>
      <span>Left</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-align-center"></i>
      </span>
      <span>Center</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-align-right"></i>
      </span>
      <span>Right</span>
    </a>
  </p>
</div>

List of buttons #

New! 0.6.1

You can now create a list of buttons with the .buttons container.

Save changes Save and continue Cancel
<div class="buttons">
  <span class="button is-success">Save changes</span>
  <span class="button is-info">Save and continue</span>
  <span class="button is-danger">Cancel</span>
</div>

If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty
<div class="buttons">
  <span class="button">One</span>
  <span class="button">Two</span>
  <span class="button">Three</span>
  <span class="button">Four</span>
  <span class="button">Five</span>
  <span class="button">Six</span>
  <span class="button">Seven</span>
  <span class="button">Eight</span>
  <span class="button">Nine</span>
  <span class="button">Ten</span>
  <span class="button">Eleven</span>
  <span class="button">Twelve</span>
  <span class="button">Thirteen</span>
  <span class="button">Fourteen</span>
  <span class="button">Fifteen</span>
  <span class="button">Sixteen</span>
  <span class="button">Seventeen</span>
  <span class="button">Eighteen</span>
  <span class="button">Nineteen</span>
  <span class="button">Twenty</span>
</div>

You can attach buttons together with the .has-addons modifier.

Yes Maybe No
<div class="buttons has-addons">
  <span class="button">Yes</span>
  <span class="button">Maybe</span>
  <span class="button">No</span>
</div>

Use the is-centered or the is-right modifiers to alter the alignment.

Yes Maybe No
Yes Maybe No
<div class="buttons has-addons is-centered">
  <span class="button">Yes</span>
  <span class="button">Maybe</span>
  <span class="button">No</span>
</div>

<div class="buttons has-addons is-right">
  <span class="button">Yes</span>
  <span class="button">Maybe</span>
  <span class="button">No</span>
</div>

You can use any modifier class on each button to differentiate them. Make sure to add the is-selected modifier as well to make sure the selected button is above its siblings.

Yes Maybe No
Yes Maybe No
Yes Maybe No
<div class="buttons has-addons">
  <span class="button is-success is-selected">Yes</span>
  <span class="button">Maybe</span>
  <span class="button">No</span>
</div>

<div class="buttons has-addons">
  <span class="button">Yes</span>
  <span class="button is-info is-selected">Maybe</span>
  <span class="button">No</span>
</div>

<div class="buttons has-addons">
  <span class="button">Yes</span>
  <span class="button">Maybe</span>
  <span class="button is-danger is-selected">No</span>
</div>

Difference between form groups and list of buttons

While this list of buttons style can be achieved with either field is-grouped or the new buttons class, there are a few differences:

  • buttons has a simpler markup
  • buttons can only contain button elements
  • field is-grouped can contain any type of control inputs
  • field is-grouped can be forced to fit all controls on a single line
  • with field is-grouped you can expand one of the controls

Basically, if you only want a list of buttons, using buttons is recommended. If you need more control on the styling and the elements, use a form group.


Variables #

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

Name Type Default value Computed value
Name Type Default value Computed value
$button-color color $grey-darker hsl(0, 0%, 21%)
$button-background-color color $white hsl(0, 0%, 100%)
$button-border-color color $grey-lighter hsl(0, 0%, 86%)
$button-border-width variable $control-border-width
$button-padding-vertical size calc(0.375em - #{$button-border-width})
$button-padding-horizontal size 0.75em
$button-hover-color color $link-hover hsl(0, 0%, 21%)
$button-hover-border-color color $link-hover-border hsl(0, 0%, 71%)
$button-focus-color color $link-focus hsl(0, 0%, 21%)
$button-focus-border-color color $link-focus-border hsl(217, 71%, 53%)
$button-focus-box-shadow-size size 0 0 0 0.125em
$button-focus-box-shadow-color color rgba($link, 0.25)
$button-active-color color $link-active hsl(0, 0%, 21%)
$button-active-border-color color $link-active-border hsl(0, 0%, 29%)
$button-text-color color $text hsl(0, 0%, 29%)
$button-text-hover-background-color color $background hsl(0, 0%, 96%)
$button-text-hover-color color $text-strong hsl(0, 0%, 21%)
$button-disabled-background-color color $white hsl(0, 0%, 100%)
$button-disabled-border-color color $grey-lighter hsl(0, 0%, 86%)
$button-disabled-shadow string none
$button-disabled-opacity unitless 0.5
$button-static-color color $grey hsl(0, 0%, 48%)
$button-static-background-color color $white-ter hsl(0, 0%, 96%)
$button-static-border-color color $grey-lighter hsl(0, 0%, 86%)

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

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!