Bulma - Button

Description

A button element provide user interaction with custom button styles and can be used as actions in forms, dialogs and supports different types of sizes, colors, states etc. The button can include in the page by using .button class on the anchor links, input tag etc.

Colors and Sizes

The below example describes color by using color modifiers such as is-primary, is-info, is-link, is-success, is-warning, is-danger and sizes such as is-small, is-medium and is-large classes of buttons −

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Buttons Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Buttons
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Basic Buttons
            </span>
            <br>
            
            <a class = "button">Anchor</a>
            <button class = "button">Button</button>
            <input class = "button" type = "submit" value = "Submit">
            <br>
            <br>  
            
            <span class = "is-size-5">
               Button Colors
            </span>
            <br>
            
            <a class = "button is-white">White</a>
            <a class = "button is-light">Light</a>
            <a class = "button is-dark">Dark</a>
            <a class = "button is-black">Black</a>
            <a class = "button is-text">Text</a>
            <br>
            <br>
            
            <a class = "button is-primary">Primary</a>
            <a class = "button is-link">Link</a>
            <a class = "button is-info">Info</a>
            <a class = "button is-success">Success</a>
            <a class = "button is-warning">Warning</a>
            <a class = "button is-danger">Danger</a>
            <br>
            <br>
            
            <span class = "is-size-5">
               Button Sizes
            </span>
            <br>
            
            <a class = "button is-small">Small Button</a>
            <a class = "button">Normal Button</a>
            <a class = "button is-medium">Medium Button</a>
            <a class = "button is-large">Large Button</a>
         </div>
      </section>
      
   </body>
</html>

It displays the below output −

Styles

The below example describes different types of styles by using classes such as is-outlined, is-inverted, is-rounded along with color modifiers of buttons −

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Buttons Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Buttons Styles
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Outlined Buttons
            </span>
            <br>
            
            <a class = "button is-outlined">Outlined</a>
            <a class = "button is-primary is-outlined">Outlined</a>
            <a class = "button is-link is-outlined">Outlined</a>
            <a class = "button is-info is-outlined">Outlined</a>
            <a class = "button is-success is-outlined">Outlined</a>
            <a class = "button is-danger is-outlined">Outlined</a>
            <br>
            <br>  
            
            <span class = "is-size-5">
               Inverted Buttons (text color becomes background color, and vice-versa)
            </span>
            <br>
            
            <div class = "columns">
               <div class = "column is-narrow ">
                  <div class = "box has-background-info" >
                     <a class = "button is-primary is-inverted">Inverted</a>
                     <a class = "button is-link is-inverted">Inverted</a>
                     <a class = "button is-info is-inverted">Inverted</a>
                     <a class = "button is-success is-inverted">Inverted</a>
                     <a class = "button is-danger is-inverted">Inverted</a>
                  </div>
               </div>
            </div>
            
            <span class = "is-size-5">
               Inverted Outlined Buttons (
                  invert color becomes the text and border colors)
            </span>
            <br>
            
            <div class = "columns">
               <div class = "column is-narrow ">
                  <div class = "box has-background-info" >
                     <a class = "button is-primary is-inverted is-outlined">Invert Outlined</a>
                     <a class = "button is-link is-inverted is-outlined">Invert Outlined</a>
                     <a class = "button is-info is-inverted is-outlined">Invert Outlined</a>
                     <a class = "button is-success is-inverted is-outlined">Invert Outlined</a>
                     <a class = "button is-danger is-inverted is-outlined">Invert Outlined</a>
                  </div>
               </div>
            </div>
            
            <span class = "is-size-5">
               Rounded buttons
            </span>
            <br>
            <br>
            
            <a class = "button is-rounded">Rounded</a>
            <a class = "button is-primary is-rounded">Rounded</a>
            <a class = "button is-link is-rounded">Rounded</a>
            <a class = "button is-info is-rounded">Rounded</a>
            <a class = "button is-success is-rounded">Rounded</a>
            <a class = "button is-danger is-rounded">Rounded</a>
         </div>
      </section>
      
   </body>
</html>

It displays the below output −

States

The button can be displayed in the different types of states by using classes such as is-focused, is-active, is-loading and buttons with icons as described in the below example −

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Buttons Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Buttons States
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Normal Buttons
            </span>
            <br>
            
            <a class = "button">Normal</a>
            <a class = "button is-primary">Normal</a>
            <a class = "button is-link">Normal</a>
            <br>
            <br>  
            
            <span class = "is-size-5">
               Focus Buttons 
            </span>
            <br>
            
            <a class = "button is-focused">Focus</a>
            <a class = "button is-primary is-focused">Focus</a>
            <a class = "button is-link is-focused">Focus</a>
            <br>
            <br>
            
            <span class = "is-size-5">
               Active Buttons
            </span>
            <br>
            
            <a class = "button is-active">Active</a>
            <a class = "button is-primary is-active">Active</a>
            <a class = "button is-link is-active">Active</a>
            <br>
            <br>
            
            <span class = "is-size-5">
               Loading buttons
            </span>
            <br>
            <br>
            
            <a class = "button is-loading">Loading</a>
            <a class = "button is-primary is-loading">Loading</a>
            <a class = "button is-link is-loading">Loading</a>
            <br>
            <br>
            
            <span class = "is-size-5">
               Disabled buttons
            </span>
            <br>
            <br>
            
            <a class = "button" title = "Disabled button" disabled>Disabled</a>
            <a class = "button is-primary" title = "Disabled button" disabled>Disabled</a>
            <a class = "button is-link" title = "Disabled button" disabled>Disabled</a>
            <br>
            <br>
            
            <span class = "is-size-5">
               Buttons with Icons
            </span>
            <br>
            <br>
            
            <p class = "buttons">
               <a class = "button is-primary">
                  <span class = "icon">
                     <i class = "fab fa-youtube"></i>
                  </span>
                  <span>Youtube</span>
               </a>
               
               <a class = "button is-success">
                  <span class = "icon is-small">
                     <i class = "fas fa-bookmark"></i>
                  </span>
                  <span>Bookmark</span>
               </a>
               
               <a class = "button is-danger is-outlined">
                  <span>Delete</span>
                  <span class = "icon is-small">
                     <i class = "fas fa-trash"></i>
                  </span>
               </a>
            </p>
            
            <span class = "is-size-5">
               Buttons group with addons
            </span>
            <br>
            <br>
            
            <div class = "field has-addons">
               <p class = "control">
                  <a class = "button">
                     <span class = "icon is-small">
                        <i class = "fas fa-bold"></i>
                     </span>
                     <span>Bold</span>
                  </a>
               </p>
               
               <p class = "control">
                  <a class = "button">
                     <span class = "icon is-small">
                        <i class = "fas fa-italic"></i>
                     </span>
                     <span>Italic</span>
                  </a>
               </p>
               
               <p class = "control">
                  <a class = "button">
                     <span class = "icon is-small">
                        <i class = "fas fa-underline"></i>
                     </span>
                     <span>Underline</span>
                  </a>
               </p>
            </div>
            
         </div>
      </section>
      
   </body>
</html>

It displays the below output −

bulma_elements.htm
Advertisements