Open In App

Bulma Button Styles

Last Updated : 15 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Bulma Button style class is used to set the style of the button. There are four pre-defined button styles in Bulma: Outlined, Inverted, Outlined Inverted, and Rounded. You can set the button style with the help of three CSS classes provided by Bulma.

Bulma Button Styles Classes:

  • is-outlined: This class is used to set the button style to outlined.
  • is-inverted: This class swaps the text color with the background color.
  • is-rounded: This class is used to make the corners of the button rounded.

Syntax:

<button class="button is-outlined">
   Button
</button>

Note: The is-outlined and is-inverted classes can be used together to make Outlined Inverted Buttons.

Example: The example below shows the use of Bulma button-style classes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Button Styles</title>
    <link rel='stylesheet' 
          href=
  
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
    <b>Bulma Button Styles</b>
    <br><br>
    <div class="container">
  
        <div class="buttons is-centered">
            <strong>Outlined:
            <button class="button is-primary is-outlined">
                Button 1
            </button>
            </strong>
            <strong>Inverted:
            <button class="button is-info is-inverted">
                Button 2
            </button>
            </strong>
            <strong>Rounded:
            <button class="button is-danger is-rounded">
                Button 3
            </button>
            </strong>
        </div>
  
    </div>
</body>
  
</html>


Output: 

Bulma Button Styles

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



Similar Reads

How to add custom styles and ways to add custom styles in Tailwind-CSS ?
Tailwind is a popular CSS framework that makes your User Interface design making the process easier. It provides low-level classes and those classes combine to create styles for various components. Tailwind-CSS comes with a bunch of predefined styling but as a developer, we need more custom styling and the styles offered by tailwind are not enough
3 min read
Bulma Select Styles
Bulma is a free, 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. Bulma select style is used to set the style on the select elements. There is only a single style that is used in the select element. This style is used to cre
1 min read
Bulma Input Styles
Bulma is a free, 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. Bulma Input style is used to set the style on input fields. There is only a single style that is used in an input field. This style is used to create a rounde
1 min read
Bulma Tabs Styles
Bulma is an open-source CSS framework used to make beautiful and responsive websites for devices with a variety of screen sizes. In this article, we will be seeing Bulma Tabs style classes which are used to set the style of the tabs. Bulma tabs come in four different styles: boxed, toggle, rounded-toggle, and full-width. Tab style can be set by usi
3 min read
Bulma Pagination Styles
Bulma is a free and open-source CSS framework based on flexbox which enables web developers to make beautiful and responsive websites for all screen sizes. In this article, we will be seeing the styles of the pagination component in Bulma. Bulma pagination component has only one style variation which can be applied by appending an is-rounded modifi
2 min read
Bootstrap 5 Button group Outlined styles
Button group is a component provided by Bootstrap 5 which helps to combine the buttons in a series in a single line. For the Button group outlined style, we will create a div element with class .btn-group and inside the div element, we will create button elements. Bootstrap 5 provides a series of classes that can be used to create outline buttons i
3 min read
Bootstrap 5 Button group Mixed styles
Bootstrap 5 Button group is a component that helps to combine the buttons in a series in a single line. In button group mixed styles, we can create a button group with different background colors. Button group Mixed styles used Classes: .btn-group: This class is used to group a series of buttons together on a single line..btn: This class is used to
2 min read
How to Customize Button Styles in Bootstrap ?
Customizing button styles in Bootstrap involves modifying predefined classes or creating custom CSS rules. This allows alignment with brand identity, and differentiation, and ensures design consistency across projects. We can customize button styles in Bootstrap using different approaches as listed below: Table of Content Using internal stylingUsin
3 min read
Bulma Button Variables
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 have classic designs in different colors, sizes, and states which makes it interactive. Variable Used: $button-color: This variable is
4 min read
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 but
3 min read
Article Tags :