Bulma Button Colors

In Bulma,  buttons are available in many colors. We can set the colors of the button as per our requirement. There are many classes for colors in Bulma all the classes are mentioned and described below.

Button Colors classes:

• is-white: This class is used for the white color of the button.
• is-black: This class is used for the black color of the button.
• is-light: This class is used for the light color of the button.
• is-dark: This class is used for the dark color of the button.
• is-text: This class is used for the text-like appearance of the button.
• is-ghost: This class is used for the ghost-like appearance of the button.
• is-primary: This class is used to give the primary color of the button.
• is-link: This class is used to give the link color of the button.
• is-info: This class is used to give the info color of the button.
• is-success: This class is used to give the success color of the button.
• is-warning: This class is used to give the warning color of the button.
• is-danger: This class is used to give the danger color of the button.

Syntax:

<button class="button Colors-classes">...</button>

Below examples demonstrates the Bulma Button Colors.

Example 1: 

Output:

👁 Bulma Button Colors

Example 2: 

Output:

👁 Image

Example 3: We can also add a light version to the button color using is-light to the color modifier.

Output:

👁 Image

Reference:  https://bulma.io/documentation/elements/button/#colors