Bulma Reset

Last Updated : 07 Mar, 2022

In this article, we’ll learn about Bulma Reset. Bulma reset() is a mixin that is used in creating a button or any other element non-clickable. The reset() mixin applies a soft styling reset in the HTML element. This mixin is mostly used in <button> elements.

Bulma Reset Class: For creating a reset button mixin, there is no specific class given by Bulma, rather we create our class and style it using SASS mixins.

Syntax:

<button class="button bulma-reset-mixin">
  ...
</button>

.bulma-reset-mixin {
    @include reset;
}

Example 1: Below example illustrates the Bulma reset mixin in a normal button.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Bulma Reset</title> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet"
          href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> 
    <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
    </script> 
    <link rel="stylesheet"
          href="demo.css"> 
</head> 
  
<body> 
    <div class="content container 
                has-text-centered"> 
        <h1 class="title has-text-success"> 
            GeekforGeeks</h1> 
        <h1 class="subtitle">Bulma Reset</h1> 
  
        <!-- Below is Bulma reset mixin -->
        <button>Normal button</button> 
        <button class="bulma-reset-mixin"> 
          Reset button 
        </button> 
    </div> 
</body> 
  
</html>

CSS

@mixin reset() { 
    appearance: none; 
    background: 0 0; 
    border: none; 
    font-family: inherit; 
    font-size: 1em; 
    margin: 0; 
    padding: 0; 
} 
  
.bulma-reset-mixin { 
    @include reset; 
}

Output:

Bulma Reset

Example 2: Below example illustrates the Bulma reset mixin in a Bulma button.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Bulma Reset</title> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet"
          href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> 
    <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
    </script> 
    <link rel="stylesheet" 
          href="demo.css"> 
</head> 
  
<body> 
    <div class="content container has-text-centered"> 
        <h1 class="title has-text-success"> 
            GeekforGeeks</h1> 
        <h1 class="subtitle">Bulma Reset</h1> 
  
        <!-- Below is Bulma reset mixin -->
        <button class="button is-primary"> 
          Bulma default 
        </button> 
        <button class="button bulma-reset-mixin"> 
          Bulma reset 
        </button> 
  
    </div> 
</body> 
  
</html>

CSS

@mixin reset() { 
    appearance: none; 
    background: 0 0; 
    border: none; 
    font-family: inherit; 
    font-size: 1em; 
    margin: 0; 
    padding: 0; 
} 
  
.bulma-reset-mixin { 
    @include reset; 
}