Learn CSS with 🎓 online interactive courses,📺 educational videos, and 🧑🏻‍💻project-building tutorials.
Download

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor

Route Planner and Route Optimizer

Button

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

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

Example

HTML 

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

The button class can be used on:

  • <a> anchor links
  • <button> form buttons
  • <input type="submit"> submit inputs
  • <input type="reset"> reset inputs

Example

Anchor

HTML 

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

The button is available in all the different colors defined by the $colors Sass map.

Example

HTML 

<button class="button is-white">White</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-black">Black</button>
<button class="button is-text">Text</button>
<button class="button is-ghost">Ghost</button>

Example

HTML 

<div class="buttons">
  <button class="button is-primary">Primary</button>
  <button class="button is-link">Link</button>
</div>

<div class="buttons">
  <button class="button is-info">Info</button>
  <button class="button is-success">Success</button>
  <button class="button is-warning">Warning</button>
  <button class="button is-danger">Danger</button>
</div>

Each color also comes in its light version. Simply append the modifier is-light to the color modifier to apply the light version of the button.

Example

HTML 

<div class="buttons">
  <button class="button is-primary is-light">Primary</button>
  <button class="button is-link is-light">Link</button>
</div>

<div class="buttons">
  <button class="button is-info is-light">Info</button>
  <button class="button is-success is-light">Success</button>
  <button class="button is-warning is-light">Warning</button>
  <button class="button is-danger is-light">Danger</button>
</div>

A dark version also exists. Simply append the modifier is-dark.

Example

HTML 

<div class="buttons">
  <button class="button is-primary is-dark">Primary</button>
  <button class="button is-link is-dark">Link</button>
</div>

<div class="buttons">
  <button class="button is-info is-dark">Info</button>
  <button class="button is-success is-dark">Success</button>
  <button class="button is-warning is-dark">Warning</button>
  <button class="button is-danger is-dark">Danger</button>
</div>

Sizes #

The button comes in 4 different sizes:

  • small
  • normal
  • medium
  • large

While the default size is the normal one, the is-normal modifier exists in case you need to reset the button to its normal size.

Example

HTML 

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

You can change the size of multiple buttons at once by wrapping them in a buttons parent, and applying one of 3 modifiers:

  • buttons are-small
  • buttons are-medium
  • buttons are-large

Example

HTML 

<div class="buttons are-medium">
  <button class="button">All</button>
  <button class="button">Medium</button>
  <button class="button">Size</button>
</div>

You can change the size of only a subset of buttons by simply applying a modifier class to them.
For example, if you want all buttons to be small but still have one in its normal size, simply do the following:

Example

HTML 

<div class="buttons are-small">
  <button class="button">Small</button>
  <button class="button">Small</button>
  <button class="button">Small</button>
  <button class="button is-normal">Normal</button>
  <button class="button">Small</button>
</div>

Responsive sizes #

If you want different button sizes for each breakpoint, you can use Bulma's responsive buttons. Simply append the is-responsive modifier:

Name Fixed size Responsive size (resize window to see in action) Code
Default 
<button class="button is-responsive">
  Default
</button>
Small 
<button class="button is-small is-responsive">
  Small
</button>
Normal 
<button class="button is-normal is-responsive">
  Normal
</button>
Medium 
<button class="button is-medium is-responsive">
  Medium
</button>
Large 
<button class="button is-large is-responsive">
  Large
</button>

You can customise the sizes by overwriting the $button-responsive-sizes Sass variable.

Displays #

Example

HTML 

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

Styles #

Outlined

Example

HTML 

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

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

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

Rounded buttons

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

States #

Bulma styles the different states of its buttons. Each state is available as a pseudo-class and a CSS class:

  • :hover and is-hovered
  • :focus and is-focused
  • :active and is-active

This allows you to obtain the style of a certain state without having to trigger it.

Normal

Example

HTML 

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

Hover

Example

HTML 

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

Focus

Example

HTML 

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

Active

Example

HTML 

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

Loading

You can very easily turn a button into its loading version by appending the is-loading modifier. You don't even need to remove the inner text, which allows the button to maintain its original size between its default and loading states.

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

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

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

Bulma supports the use of the disabled Boolean HTML attribute, which prevents the user from interacting with the button.

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

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

With Font Awesome icons

Bulma buttons can easily be enhanced by adding a Font Awesome icon. For the best results, wrap the inner text in a separate <span> element.

Example

HTML 

<p class="buttons">
  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-bold"></i>
    </span>
  </button>
  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-italic"></i>
    </span>
  </button>
  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-underline"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button is-primary">
    <span class="icon">
      <i class="fab fa-twitter"></i>
    </span>
    <span>@jgthms</span>
  </button>
  <button class="button is-success">
    <span class="icon is-small">
      <i class="fas fa-check"></i>
    </span>
    <span>Save</span>
  </button>
  <button class="button is-danger is-outlined">
    <span>Delete</span>
    <span class="icon is-small">
      <i class="fas fa-times"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button is-small">
    <span class="icon is-small">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button is-medium">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button is-large">
    <span class="icon is-medium">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
</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">
  <button class="button is-small">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fas fa-heading fa-lg"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button is-medium">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </button>
  <button class="button is-medium">
    <span class="icon">
      <i class="fas fa-heading fa-lg"></i>
    </span>
  </button>
  <button class="button is-medium">
    <span class="icon is-medium">
      <i class="fas fa-heading fa-2x"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button is-large">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </button>
  <button class="button is-large">
    <span class="icon">
      <i class="fas fa-heading fa-lg"></i>
    </span>
  </button>
  <button class="button is-large">
    <span class="icon is-medium">
      <i class="fas fa-heading fa-2x"></i>
    </span>
  </button>
</p>

Button group #

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

Example

HTML 

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

Button addons #

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

Example

HTML 

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

Button group with addons #

You can group together addons as well:

Example

HTML 

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

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

List of buttons #

You can create a list of buttons by using the buttons container.

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

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

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

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

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

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

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

<div class="buttons has-addons is-right">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">No</button>
</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. 

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

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

<div class="buttons has-addons">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button is-danger is-selected">No</button>
</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.

Sass and CSS variables #

Sass Variable
CSS Variable
Value 
$button-weight
 
var(--bulma-button-weight)
 
var(--bulma-weight-medium)
 
$button-family
 
var(--bulma-button-family)
 
false
 
$button-border-color
 
var(--bulma-button-border-color)
 
var(--bulma-border)
 
$button-border-style
 
var(--bulma-button-border-style)
 
solid
 
$button-border-width
 
var(--bulma-button-border-width)
 
var(--bulma-control-border-width)
 
$button-padding-vertical
 
var(--bulma-button-padding-vertical)
 
0.5em
 
$button-padding-horizontal
 
var(--bulma-button-padding-horizontal)
 
1em
 
$button-focus-border-color
 
var(--bulma-button-focus-border-color)
 
var(--bulma-link-focus-border)
 
$button-focus-box-shadow-size
 
var(--bulma-button-focus-box-shadow-size)
 
0 0 0 0.125em
 
$button-focus-box-shadow-color
 
var(--bulma-button-focus-box-shadow-color)
 
hsla(
  var(--bulma-link-h),
  var(--bulma-link-s),
  var(--bulma-link-on-scheme-l),
  0.25
)
 
$button-active-color
 
var(--bulma-button-active-color)
 
var(--bulma-link-active)
 
$button-active-border-color
 
var(--bulma-button-active-border-color)
 
var(--bulma-link-active-border)
 
$button-text-color
 
var(--bulma-button-text-color)
 
var(--bulma-text)
 
$button-text-decoration
 
var(--bulma-button-text-decoration)
 
underline
 
$button-text-hover-background-color
 
var(--bulma-button-text-hover-background-color)
 
var(--bulma-background)
 
$button-text-hover-color
 
var(--bulma-button-text-hover-color)
 
var(--bulma-text-strong)
 
$button-ghost-background
 
var(--bulma-button-ghost-background)
 
none
 
$button-ghost-border-color
 
var(--bulma-button-ghost-border-color)
 
transparent
 
$button-ghost-color
 
var(--bulma-button-ghost-color)
 
var(--bulma-link-text)
 
$button-ghost-decoration
 
var(--bulma-button-ghost-decoration)
 
none
 
$button-ghost-hover-color
 
var(--bulma-button-ghost-hover-color)
 
var(--bulma-link)
 
$button-ghost-hover-decoration
 
var(--bulma-button-ghost-hover-decoration)
 
underline
 
$button-disabled-background-color
 
var(--bulma-button-disabled-background-color)
 
var(--bulma-scheme-main)
 
$button-disabled-border-color
 
var(--bulma-button-disabled-border-color)
 
var(--bulma-border)
 
$button-disabled-shadow
 
var(--bulma-button-disabled-shadow)
 
none
 
$button-disabled-opacity
 
var(--bulma-button-disabled-opacity)
 
0.5
 
$button-static-color
 
var(--bulma-button-static-color)
 
var(--bulma-text-weak)
 
$button-static-background-color
 
var(--bulma-button-static-background-color)
 
var(--bulma-scheme-main-ter)
 
$button-static-border-color
 
var(--bulma-button-static-border-color)
 
var(--bulma-border)

How to support Bulma

One-time donation

Browser testing via

Visit our Sponsors

Monthly donation

Become a sponsor
#native_company# #native_desc#
#native_cta#
Get started for Free
Get started for Free