Bulma Button Colors

Last Updated : 20 Jan, 2022

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:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Button Colors</title> 
    <link rel='stylesheet'
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body> 
    <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> 
</body> 
  
</html>

Output:

Bulma Button Colors

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Button Colors</title> 
    <link rel='stylesheet' 
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body> 
    <div> 
        <button class="button is-primary"> 
          GeeksforGeeks 
        </button> 
        <button class="button is-link"> 
          GeeksforGeeks 
        </button> 
        <button class="button is-info"> 
          GeeksforGeeks 
        </button> 
        <button class="button is-success"> 
          GeeksforGeeks 
        </button> 
        <button class="button is-warning"> 
          GeeksforGeeks 
        </button> 
        <button class="button is-danger"> 
          GeeksforGeeks 
        </button> 
    </div> 
</body> 
  
</html>

Output:

Bulma Button Colors

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Button Colors</title> 
    <link rel='stylesheet' 
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body> 
    <div class="buttons"> 
        <button class="button is-primary is-light"> 
            GeeksforGeeks 
        </button> 
        <button class="button is-link is-light"> 
            GeeksforGeeks 
        </button> 
        <button class="button is-info is-light"> 
            GeeksforGeeks 
        </button> 
        <button class="button is-success is-light"> 
            GeeksforGeeks 
        </button> 
        <button class="button is-warning is-light"> 
            GeeksforGeeks 
        </button> 
        <button class="button is-danger is-light"> 
            GeeksforGeeks 
        </button> 
    </div> 
</body> 
  
</html>