Bulma Button Variables

Last Updated : 19 Aug, 2022

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 used to provide the color of the button.
$button-background-color: This variable is used to provide the background color of the button.
$button-family: This variable is used to define the font family of the button.
$button-border-color: This variable is used to define the color of the border.
$button-border-width: This variable is used to define the width of the border.
$button-padding-vertical: This variable is used to define the vertical padding around the button.
$button-padding-horizontal: This variable is used to provide horizontal padding around the button.
$button-hover-color: This variable is used to provide color on hover over the button.
$button-hover-border-color: This variable is used to provide border color to the button on the hover.
$button-focus-color: This variable is used to provide focus color to the button.
$button-focus-border-color: This variable is used to provide focus border color to the button.
$button-focus-box-shadow-size: This variable is used to provide the box shadow size of the button.
$button-focus-box-shadow-color: This variable is used to provide the shadow color of the button.
$button-active-color: This variable is used to provide color to the active button.
$button-active-border-color: This variable is used to provide border color to the active button.
$button-text-color: This variable is used to provide color to the text of the button.
$button-text-decoration: This variable is used to provide the decoration to the text of the button.
$button-text-hover-background-color: This variable is used to provide background color on hover over the text of the button.
$button-text-hover-color: This variable is used to provide color to the button on hover over the text of the button.
$button-ghost-background: This variable is used to provide a ghost background color to the button.
$button-ghost-border-color: This variable is used to provide a ghost border color to the button.
$button-ghost-color: This variable is used to provide a ghost color to the button.
$button-ghost-decoration: This variable is used to provide ghost decoration to the button.
$button-ghost-hover-color: This variable is used to provide ghost color to the button on hover over the button.
$button-ghost-hover-decoration: This variable is used to provide decoration of the button on the hover.
$button-disabled-background-color: This variable is used to provide background color to the disabled button.
$button-disabled-border-color: This variable is used to provide border color to the disabled button.
$button-disabled-shadow: This variable is used to provide shadow to the disabled button.
$button-disabled-opacity: This variable is used to provide opacity to the disabled button.
$button-static-color: This variable is used to provide color to the static button.
$button-static-background-color: This variable is used to provide background color to the static button.
$button-static-border-color: This variable is used to provide border color to the static button.
$button-colors: This variable is used to provide color to the button.
$button-responsive-sizes: This variable is used to provide a breakdown of the button.

Example 1: This example creates colored buttons using Bulma and modifies that button using variables.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    <link rel="stylesheet" href="style.css">        
     <!-- font-awesome cdn -->
    <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
    </script>        
</head>

<style>
    button{
        margin-left:420px;
    }
</style>

<body>
    <center>    
        <h1 class="title has-text-centered has-text-success">
            GeeksforGeeks
        </h1>
        <h3 class="subtitle has-text-centered">
            A computer science portal for geeks.
        </h3>
        <div class='container has-text-centered'>
            <div class='buttons has-text-success'>
                <button class="but">
                    GeeksforGeeks
                </button>            
            </div>
        </div>
    </center>
</body>
</html>

SCSS Code:

$button-background-color:green;
.but{
  background-color:$button-background-color;
  }

Compiled CSS Code:

.but {
 background-color: green; }

Output:

Example 2: This example creates colored buttons using Bulma and modifies that button using variables.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    <link rel="stylesheet" href="style.css">        
     <!-- font-awesome cdn -->
    <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
    </script>    
</head>
<style>
 button{
    margin-left: 420px;
 }
</style>
<body>
    <center>    
        <h1 class="title has-text-centered has-text-success">
            GeeksforGeeks
        </h1>
        <h3 class="subtitle has-text-centered">
            A computer science portal for geeks.
        </h3>

        <div class='container has-text-centered'>
            <div class='buttons'>
                <button class="but">
                    GeeksforGeeks
                </button>                
            </div>
        </div>        
    </center>
</body>
</html>

SCSS Code:

$button-color:green;
.but{
  color:$button-color;
}

Compiled CSS Code:

.but {
 color: green; 
}

Output:

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

Bulma Button Sizes

krishna_97

Improve

Article Tags :

Bulma Button Variables

Similar Reads

Thank You!

What kind of Experience do you want to share?