Bulma Reset
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" > GeekforBeginner</ 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:
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" > GeekforBeginner</ 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; } |
Output: