Bulma | Button

Bulma | button is used to interact with different web components such as submitting form, clicking the link, interaction with model or dialog box, etc.

Step To Create Bulma Button

To create Bulma button, assign .button modifier class to the <a>, <button>, <input type="submit">, <input type="reset"> element base class.

Example

Anchor

General Syntax

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

Try it now

Source Code

Download

          
            <div class="columns">
  <div class="column">
     <a class="button">Anchor</a>
  </div>
  <div class="column">
     <button class="button">Button</button>
  </div>
  <div class="column">
     <input class="button" type="submit" value="Submit input">
  </div>
  <div class="column">
    <input class="button" type="reset" value="Reset input">
  </div>
</div>

Try it now

Source Code : Output

Anchor

Button Colors

To create colored button use following predefined modifier class such as: is-white, is-light, is-dark, is-black, is-text, is-ghost, is-primary, is-link, is-info, is-success, is-warning, is-danger.

Example

General Syntax

      
        <button class="button  {is-primary | is-link | is-info | is-success | is-warning | is-danger">Button</button>
 <button class="button ">Link</button>

Try it now

Source Code

Download

          
            <div class="container">
  <div class="columns is-mobile">
    <div class="column">
      <button class="button is-primary">Primary</button>
    </div>
    <div class="column">
      <button class="button is-link">Link</button>
    </div>
    <div class="column">
      <button class="button is-info">Info</button>
    </div>
  </div>
  <div class="columns is-mobile">
    <div class="column">
      <button class="button is-success">Success</button>
    </div>
    <div class="column">
      <button class="button is-warning">Warning</button>
    </div>
    <div class="column">
      <button class="button is-danger">Danger</button>
    </div>
  </div>
</div>

Try it now

Source Code : Output

Button Light Color

To create light background color of the button, simply assign the is-light modifier class to the button having .button & is-{primary |success |danger |warning |...} modifier class.

Example

General Syntax

      
        <button class="button is-{primary | success | danger | warning|...} is-light">Primary</button>

Try it now

Source Code

Download

          
            <div class="columns is-mobile">
  <div class="column">
    <button class="button is-primary is-light">Primary</button>
  </div>
  <div class="column">
    <button class="button is-link is-light">Link</button>
  </div>
  <div class="column">
    <button class="button is-info is-light">Info</button>
  </div>
</div>
<div class="columns is-mobile">
  <div class="column">
    <button class="button is-success is-light">Success</button>
  </div>
  <div class="column">
    <button class="button is-warning is-light">Warning</button>
  </div>
  <div class="column">
    <button class="button is-danger is-light">Danger</button>
  </div>
</div>

Try it now

Source Code : Output

Button Size

Bulma provides, four different sizes of buttons. These button sizes are:small,normal, medium & large.

By default, button size is normal, but you can reset the button to its normal size by using .is-normal modifier class.

To create small, medium and large button, follow the following steps:

Small button - To create small button ,assign .is-small modifier class to the button element base class.
Medium button - To create medium button ,assign .is-medium modifier class to the button element base class.
Large button - To create large button ,assign .is-large modifier class to the button element base class.

General Syntax

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

Try it now

Source Code

Download

          
            <div class="container">
  <div class="columns is-mobile">
    <div class="column">
      <button class="button is-small">Small</button>
    </div>
    <div class="column">
      <button class="button">Default</button>
    </div>
    <div class="column">
      <button class="button is-normal">Normal</button>
    </div>
  </div>
  <div class="columns is-mobile">
    <div class="column">
      <button class="button is-medium">Medium</button>
    </div>
    <div class="column">
      <button class="button is-large">Large</button>
    </div>
  </div>
</div>

Try it now

Source Code : Output

Bulma | Button

Step To Create Bulma Button

Example

Button Colors

Example

Button Light Color

Example

Button Size

Web Tutorials