Bulma | Button

Bulma is a free, and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.
Buttons in Bulma CSS has classic designs in different colors, sizes, and states which makes it interactive.

Example 1: This example creating a colored buttons using Bulma.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma buttons</title>
  
    <link rel='stylesheet' href=
  
    <!-- custom css -->
    <style>
        .buttons {
            display: block;
        }
    </style>
</head>
  
<body>
    <div class='container has-text-centered'>
        <h1 style='color:green;margin-top:30px' 
            class='title'>Colored Buttons</h1>
  
        <div class='buttons'>
            <button class="button is-info">
                Info
            </button>
            <button class="button is-success">
                Success
            </button>
            <button class="button is-warning">
                Warning
            </button>
            <button class="button is-danger">
                Danger
            </button>
            <button class="button is-dark">
                Dark
            </button>
            <button class="button is-light">
                Light
            </button>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

Example 2: This example creating a different sizes of buttons.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma buttons</title>
    <link rel='stylesheet' href=
    <!-- custom css -->
    <style>
        .buttons {
            display: block;
        }
    </style>
</head>
  
<body>
    <div class='container has-text-centered'>
        <h1 style='color:green;margin-top:30px'
            class='title'>
            Different sizes Buttons
        </h1>
  
        <div class='buttons'>
            <button class="button is-small is-primary">
                Small
            </button>
            <button class="button is-primary">
                Default
            </button>
            <button class="button is-normal is-primary">
                Normal
            </button>
            <button class="button is-medium is-primary">
                Medium
            </button>
            <button class="button is-large is-primary">
                Large
            </button>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:



Example 3: This example creating outlined buttons.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma buttons</title>
    <link rel='stylesheet' href=
    <!-- custom css -->
    <style>
        .buttons {
            display: block;
        }
    </style>
</head>
  
<body>
    <div class='container has-text-centered'>
        <h1 style='color:green;margin-top:80px'
            class='title'>Outlined Buttons</h1>
              
        <div class='buttons'>
            <button class="button is-primary 
                is-outlined">Outlined</button>
            <button class="button is-info 
                is-outlined">Outlined</button>
            <button class="button is-success 
                is-outlined">Outlined</button>
            <button class="button is-warning 
                is-outlined">Outlined</button>
            <button class="button is-danger 
                is-outlined">Outlined</button>
            <button class="button is-link 
                is-outlined">Outlined</button>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

Note: Outlined button means only outlines of a button visible and when hovering over the button, it becomes full block button with a visible background color like the fourth button in the picture.

Example 4: This example creating rounded buttons using Bulma.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma buttons</title>
    <link rel='stylesheet' href=
    <!-- custom css -->
    <style>
        .buttons {
            display: block;
        }
    </style>
</head>
  
<body>
    <div class='container has-text-centered'>
        <h1 style='color:green;margin-top:80px' 
            class='title'>Rounded Buttons</h1>
  
        <div class='buttons'>
            <button class="button is-primary 
                is-rounded">Outlined</button>
            <button class="button is-info 
                is-rounded">Outlined</button>
            <button class="button is-success 
                is-rounded">Outlined</button>
            <button class="button is-warning 
                is-rounded">Outlined</button>
            <button class="button is-danger 
                is-rounded">Outlined</button>
            <button class="button is-link 
                is-rounded">Outlined</button>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

Example 5: This example creating loading buttons using Bulma.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma buttons</title>
    <link rel='stylesheet' href=
    <!-- custom css -->
    <style>
        .buttons {
            display: block;
        }
    </style>
</head>
  
<body>
    <div class='container has-text-centered'>
        <h1 style='color:green;margin-top:80px' 
            class='title'>Loading Buttons</h1>
  
        <div class='buttons'>
            <button class="button is-primary 
                is-loading">Loading</button>
            <button class="button is-info 
                is-loading">Loading</button>
            <button class="button is-success 
                is-loading">Loading</button>
            <button class="button is-warning 
                is-loading">Loading</button>
            <button class="button is-danger 
                is-loading">Loading</button>
            <button class="button is-link 
                is-loading">Loading</button>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

Note: The half-circle in the buttons keeps rotating i.e. something gets loaded.

Example 6: This example creating font-awesome icon buttons.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma buttons</title>
    <link rel='stylesheet' href=
  
    <!-- custom css -->
    <style>
        .buttons {
            display: block;
        }
    </style>
</head>
  
<body>
    <!-- font-awesome cdn -->
    <script src=
    </script>
      
    <div class='container has-text-centered'>
        <h1 style='color:green;margin-top:80px' 
            class='title'>
            font-awesome icon Buttons
        </h1>
  
        <div class="buttons">
            <button class="button">
                <span class="icon">
                    <i class="fab fa-github"></i>
                </span>
                <span>GitHub</span>
            </button>
            <button class="button is-primary">
                <span class="icon">
                    <i class="fab fa-twitter"></i>
                </span>
                <span>@SarahKhan__</span>
            </button>
            <button class="button is-success">
                <span class="icon is-small">
                    <i class="fas fa-check"></i>
                </span>
                <span>Save</span>
            </button>
            <button class="button is-danger 
                    is-outlined">
                <span>Delete</span>
                <span class="icon is-small">
                    <i class="fas fa-times"></i>
                </span>
            </button>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.