The button is an essential element of any design. It's meant to look and behave as an interactive element of your page.
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
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
White
Light
Dark
Black
Text
Ghost
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
Primary
Link
Info
Success
Warning
Danger
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 now comes in its light version . Simply append the modifier is-light
to the color modifier to apply the light version of the button.
Example
Primary
Link
Info
Success
Warning
Danger
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>
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
Small
Default
Normal
Medium
Large
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
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
Small
Small
Small
Normal
Small
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>
Displays
#
Example
Small
Normal
Medium
Large
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
Outlined
Outlined
Outlined
Outlined
Outlined
Outlined
HTML
<button class= "button is-outlined" > Outlined</button>
<button class= "button is-primary is-outlined" > Outlined</button>
<button class= "button is-link 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)
Inverted
Inverted
Inverted
Inverted
Inverted
<button class= "button is-primary is-inverted" > Inverted</button>
<button class= "button is-link 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>
Invert Outlined (the invert color becomes the text and border colors)
Invert Outlined
Invert Outlined
Invert Outlined
Invert Outlined
Invert Outlined
<button class= "button is-primary is-inverted is-outlined" > Invert Outlined</button>
<button class= "button is-link is-inverted is-outlined" > Invert Outlined</button>
<button class= "button is-info is-inverted is-outlined" > Invert Outlined</button>
<button class= "button is-success is-inverted is-outlined" > Invert Outlined</button>
<button class= "button is-danger is-inverted is-outlined" > Invert Outlined</button>
Rounded buttons
Rounded
Rounded
Rounded
Rounded
Rounded
Rounded
<button class= "button is-rounded" > Rounded</button>
<button class= "button is-primary is-rounded" > Rounded</button>
<button class= "button is-link 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
Normal
Normal
Normal
Normal
Normal
Normal
Normal
HTML
<button class= "button" > Normal</button>
<button class= "button is-primary" > Normal</button>
<button class= "button is-link" > 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
Hover
Hover
Hover
Hover
Hover
Hover
Hover
HTML
<button class= "button is-hovered" > Hover</button>
<button class= "button is-primary is-hovered" > Hover</button>
<button class= "button is-link 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
Focus
Focus
Focus
Focus
Focus
Focus
Focus
HTML
<button class= "button is-focused" > Focus</button>
<button class= "button is-primary is-focused" > Focus</button>
<button class= "button is-link 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
Active
Active
Active
Active
Active
Active
Active
HTML
<button class= "button is-active" > Active</button>
<button class= "button is-primary is-active" > Active</button>
<button class= "button is-link 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.
Loading
Loading
Loading
Loading
Loading
Loading
Loading
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-primary is-loading" > Loading</button>
<button class= "button is-link 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>
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.
Disabled
Disabled
Disabled
Disabled
Disabled
Disabled
Disabled
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-primary" title= "Disabled button" disabled > Disabled</button>
<button class= "button is-link" 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
GitHub
@jgthms
Save
Delete
GitHub
GitHub
GitHub
GitHub
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>
If you want to group buttons together on a single line , use the is-grouped
modifier on the field
container:
Example
Save changes
Cancel
Delete post
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>
If you want to use buttons as addons , use the has-addons
modifier on the field
container:
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>
You can group together addons as well:
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>
You can create a list of buttons by using the buttons
container.
Save changes
Save and continue
Cancel
<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 .
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen
Seventeen
Eighteen
Nineteen
Twenty
<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 .
Yes
Maybe
No
Yes
Maybe
No
<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.
Yes
Maybe
No
Yes
Maybe
No
Yes
Maybe
No
<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>
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
#
Name
Type
Value
Computed Value
Computed Type
size
calc ( 0 . 5 em - # { $button-border-width } )
$ button-padding-horizontal
size
$ button-hover-border-color
variable
color
$ button-focus-border-color
variable
color
$ button-focus-box-shadow-size
size
$ button-focus-box-shadow-color
compound
$ button-active-border-color
variable
color
$ button-text-hover-background-color
variable
color
$ button-ghost-border-color
string
$ button-ghost-hover-color
variable
color
$ button-ghost-hover-decoration
string
$ button-disabled-background-color
variable
color
$ button-disabled-border-color
variable
color
$ button-static-background-color
variable
color
$ button-static-border-color
variable
color