Bulma | Button - GeeksforGeeks

18 Jun, 2020
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.
<!DOCTYPE html><html>  <head>    <title>Bulma buttons</title>      <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>      <!-- 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>
Output:
Example 2: This example creating a different sizes of buttons.
<!DOCTYPE html><html>  <head>    <title>Bulma buttons</title>    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- 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>
Output:
Example 3: This example creating outlined buttons.
<!DOCTYPE html><html>  <head>    <title>Bulma buttons</title>    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- 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>
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.
<!DOCTYPE html><html>  <head>    <title>Bulma buttons</title>    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- 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>
Output:
Example 5: This example creating loading buttons using Bulma.
<!DOCTYPE html><html>  <head>    <title>Bulma buttons</title>    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- 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>
Output:
Note: The half-circle in the buttons keeps rotating i.e. something gets loaded.
Example 6: This example creating font-awesome icon buttons.
<!DOCTYPE html><html>  <head>    <title>Bulma buttons</title>    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>      <!-- custom css -->    <style>        .buttons {            display: block;        }    </style></head>  <body>    <!-- font-awesome cdn -->    <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>    </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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bulma
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?