Hit enter after type your search item

A little about Bulma Buttons

As a complete package, Bulma framework provides a variety of built-in button classes for creating buttons of various styles, sizes, colors and also allows customization by using Sass variables.

You may create normal buttons with default styles, color classes, large, medium, small sizes, outline buttons and many more as using the Bulma CSS framework.

Besides, lots of customization options are available if you have an idea of how to work with Sass variables.

In the following section, I am going to show you many examples with code snippets for creating the buttons in Bulma.

Which HTML tags button can be created with?

The Bulma classes for buttons can be used with the following:

  • <button> tags
  • <input type=”submit”> button (form input buttons)
  • <input type=”reset”>
  • <a> – i.e. links

An example of a simple default button

A default button can be created by applying the simple button class to the button (or other supported tags). The default button is grayish as you can see below and on the example page.

bulma default button

See online demo and code

The demo of all available colors

For creating various color buttons that are available in the Bulma CSS, you simply need to apply the contextual class. For example, the red button can be created by applying the .is-danger class. Similarly, you may create the green button by .is-success class and so on.

The demo below shows various color buttons. Note that, you have to apply the main button class plus the contextual class for a specific color, have a look:

bulma button

See online demo and code


Also, note that you may customize the button color as you want by using the $colors Sass map. For that, you should know how the Sass variable works.

An example of outline button styles

The outline button removes the background color and gives a button lighter look. You may use the outline button as the secondary action that complements the primary action.

Bulma makes it quite easier for creating the outline buttons. Just add the .is-outlined class to the above code with various colors:

bulma button outlined

See online demo and code


You may notice, the contextual background color becomes the outline color while the background of the buttons is transparent.

Creating different sized buttons

Bulma has four sizes for buttons that you may create by using the following modifiers:

  • is-small //For small size button
  • is-normal //Normal size button. This is the default So, if you do not specify, this size is applied as in above examples.
  • is-medium //For medium-size buttons
  • is-large //Large buttons

bulma button sizes

See online demo and code


As mentioned earlier, if you do not specify any modifier class then a normal sized button is created. The reason for providing the .is-normal class is to let you resize the button to normal (if required).

Short-way of changing size for multiple buttons

So, if you have a group of buttons with small or large sizes then you may create those same sized buttons at once. For that, wrap all the buttons in the parent “buttons” without specifying the sizes. Then, you have three classes’ options to specify the size i.e.

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

See the large-sized button in the demo below:

See online demo and code

A rounded buttons demo

For creating the rounded button style, just apply the is-rounded class to simple or contextual buttons as shown in the example below:

bulma button rounded

See online demo and code

Light version button example

In the second example above, we have seen how to create various color buttons by using color modifiers. For creating the lighter version of those buttons, just add the is-light class for creating the lighter version of that button.

For example, if we created a red button by is-danger modifier then add the is-light for a light red color button. See various buttons light version below:

bulma button light

See online demo and code

Inverted buttons

Just add the is-inverted modifier for inverting the background and text. So, if a danger button is created with is-inverted then red becomes the color of text and white is the background. Have a look:

bulma button inverted

See online demo and code

Buttons with font-awesome icons example

The font-awesome is a great font library that you may use with the buttons in Bulma. You have to include the font-awesome library along with Bulma CSS for using these icons.

The example below shows how to create buttons with icons:

bulma button fa

See online demo and code


Note: For best results, wrap the inner text in a separate span element.

Only icons example

You may omit the text completely for buttons with icons only. In that case, Bulma ensures that the button remains square. Have a look for different sizes:

bulma button fa icons

See online demo and code


 
This div height required for enabling the sticky sidebar