Bulma Button

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

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

Try it now

Source Code

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

Try it now

Source Code

Try it now

Source Code : Output