Button | Bulma: Free, open source, and modern CSS framework based on Flexbox

2024.09.04 00:39

Docs Documentation Expo Love Sponsor Shop New! Made with Bulma Backers Bulma Brand Bulma Extensions Download Light Dark System Download

Start Here

Overview Installation Alternative Versions Syntax Modularity Responsiveness Migrating to v1

Features

CSS Variables Themes Dark Mode Color Palettes Skeletons

Sass Tools

Mixins Responsive mixins Form Control mixins Extends

Customization

Concepts With Sass With Modular Sass With CSS Variables List of Sass variables

CSS Library

Elements Block Box Button Content Delete Icon Image Notification Progress bars Table Tag Title Components Breadcrumb Card Dropdown Menu Message Modal Navbar Pagination Panel Tabs Form General Input Textarea Select Checkbox Radio File Columns Basics Sizes Responsiveness Nesting Gap Options Grid Smart Grid Fixed Grid Grid Cells Playground Layout Container Hero Section Level Media Object Footer

CSS Helpers

Color Color Palette Spacing Typography Visibility Flexbox Other

Sponsor

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

Button

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 Button

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

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

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

Example

Primary Link Info Success Warning Danger

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

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

Example

All Medium Size

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

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 Default Default button class= "button is-responsive" Default /button Small Small Small button class= "button is-small is-responsive" Small /button Normal Normal Normal button class= "button is-normal is-responsive" Normal /button Medium Medium Medium button class= "button is-medium is-responsive" Medium /button Large Large 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

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

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)

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

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

Normal Normal Normal Normal Normal Normal Normal

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

Hover Hover Hover Hover Hover Hover Hover

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

Focus Focus Focus Focus Focus Focus Focus

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

Active Active Active Active Active Active Active

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.

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

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

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

Button group #

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

Button addons #

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

Example

Left

Center

Right

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

Bold

Italic

Underline

Left

Center

Right

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.

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.

Yes Maybe No 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

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 . 5 em $ button-padding-horizontal var ( --bulma-button-padding-horizontal ) 1 em $ 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 . 125 em $ 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 ) $ button-responsive-sizes var ( --bulma- ) ( "mobile" : ( "small" : calc ( var ( --bulma-size-small ) * 0 . 75 ), "normal" : calc ( var ( --bulma-size-small ) * 0 . 875 ), "medium" : var ( --bulma-size-small ), "large" : var ( --bulma-size-normal ), ), "tablet-only" : ( "small" : calc ( var ( --bulma-size-small ) * 0 . 875 ), "normal" : var ( --bulma-size-small ), "medium" : var ( --bulma-size-normal ), "large" : var ( --bulma-size-medium ), ), ) ← elements: Box elements: Content →

How to support Bulma

One-time donation

Browser testing via

Visit our Sponsors

Monthly donation

Become a sponsor #native_company# #native_desc# #native_cta#

Bulma by Jeremy Thomas .

Follow @jgthms

Contribute on GitHub

Share on social media

Twitter Facebook Source code licensed MIT . Website content licensed CC BY-NC-SA 4.0