Bulma Button Styles

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= 

'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 

</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:

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

Article Tags :

CSS

Web Technologies

Bulma