<div class="main--container">
    <h1 class="css--buttons--title">CSS Buttons</h1>
  
    <!--   default button -->
    <h3>Default Buttons</h3>
    <div class="css--buttons--container">
      
      <!-- default -->
      <div class="hint--top" aria-label="css--button"><button class="css--button">Button</button></div>  

      <div class="hint--top" aria-label="css--button radius--button"><button class="css--button radius--button">Button</button></div>

      <div class="hint--top" aria-label="css--button left--icon--button"><button class="css--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button right--icon--button"><button class="css--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button center--icon--button"><button class="css--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>

      <div class="hint--top" aria-label="css--button default--border--button"><button class="css--button default--border--button">Button</button></div>

      <div class="hint--top" aria-label="css--button default--border--button radius--button"><button class="css--button default--border--button radius--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button default--border--button left--icon--button"><button class="css--button default--border--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button default--border--button right--icon--button"><button class="css--button default--border--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button default--border--button center--icon--button"><button class="css--button default--border--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>

      <div class="hint--top large--button--container" aria-label="css--button large--button"><button class="css--button large--button">Large Button</button></div>  

      <div class="hint--top large--button--container" aria-label="css--button default--border--button large--button"><button class="css--button default--border--button large--button">Large Button</button></div>        
      <!-- default -->
    
    </div>  
     

    <h3>Default Disabled Buttons</h3>
    <div class="css--buttons--container">

      <!-- default disabled -->
      <div class="hint--top" aria-label="css--button disabled--button"><button class="css--button disabled--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button disabled--button radius--button"><button class="css--button disabled--button radius--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button disabled--button left--icon--button"><button class="css--button disabled--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button disabled--button right--icon--button"><button class="css--button disabled--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>

      <div class="hint--top" aria-label="css--button disabled--button center--icon--button"><button class="css--button disabled--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>
      
      <div class="hint--top" aria-label="css--button default--border--button disabled--button"><button class="css--button default--border--button disabled--button">Button</button></div>

      <div class="hint--top" aria-label="css--button default--border--button disabled--button radius--button"><button class="css--button default--border--button disabled--button radius--button">Button</button></div>

      <div class="hint--top" aria-label="css--button default--border--button disabled--button left--icon--button"><button class="css--button default--border--button disabled--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>

      <div class="hint--top" aria-label="css--button default--border--button disabled--button right--icon--button"><button class="css--button default--border--button disabled--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button default--border--button disabled--button center--icon--button"><button class="css--button default--border--button disabled--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>
      
      <div class="hint--top large--button--container" aria-label="css--button disabled--button large--button"><button class="css--button disabled--button large--button">Large Button</button></div>

      <div class="hint--top large--button--container" aria-label="css--button default--border--button disabled--button large--button"><button class="css--button default--border--button disabled--button large--button">Large Button</button></div>
      <!-- default disabled -->
      
    </div>
    <!--   default button -->


    <!--   primary button -->
    <h3>Primary Buttons</h3>
    <div class="css--buttons--container">

      <!--   primary -->
      <div class="hint--top" aria-label="css--button primary--button"><button class="css--button primary--button">Button</button></div>  
      
      <div class="hint--top" aria-label="css--button primary--button radius--button"><button class="css--button primary--button radius--button">Button</button></div>  

      <div class="hint--top" aria-label="css--button primary--button left--icon--button"><button class="css--button primary--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>  
      
      <div class="hint--top" aria-label="css--button primary--button right--icon--button"><button class="css--button primary--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>  
      
      <div class="hint--top" aria-label="css--button primary--button center--icon--button"><button class="css--button primary--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>  

      <div class="hint--top" aria-label="css--button primary--border--button"><button class="css--button primary--border--button">Button</button></div>  
      
      <div class="hint--top" aria-label="css--button primary--border--button radius--button"><button class="css--button primary--border--button radius--button">Button</button></div>  
      
      <div class="hint--top" aria-label="css--button primary--border--button left--icon--button"><button class="css--button primary--border--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>  
      
      <div class="hint--top" aria-label="css--button primary--border--button right--icon--button"><button class="css--button primary--border--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>  
      
      <div class="hint--top" aria-label="css--button primary--border--button center--icon--button"><button class="css--button primary--border--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>  

      <div class="hint--top large--button--container" aria-label="css--button primary--button large--button"><button class="css--button primary--button large--button">Large Button</button></div>  

      <div class="hint--top large--button--container" aria-label="css--button primary--border--button large--button"><button class="css--button primary--border--button large--button">Large Button</button></div>  
      <!--   primary -->

    </div>  


    <h3>Primary Disabled Buttons</h3>
    <div class="css--buttons--container">
        
      <!--   primary disabled -->
      <div class="hint--top" aria-label="css--button primary--button disabled--button"><button class="css--button primary--button disabled--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button disabled--button radius--button"><button class="css--button disabled--button primary--button radius--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button disabled--button left--icon--button"><button class="css--button primary--button disabled--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button disabled--button right--icon--button"><button class="css--button primary--button disabled--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button disabled--button center--icon--button"><button class="css--button primary--button disabled--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>
      
      <div class="hint--top" aria-label="css--button primary--border--button disabled--button"><button class="css--button primary--border--button disabled--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button primary--border--button disabled--button radius--button"><button class="css--button primary--border--button disabled--button radius--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button primary--border--button disabled--button left--icon--button"><button class="css--button primary--border--button disabled--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button primary--border--button disabled--button right--icon--button"><button class="css--button primary--border--button disabled--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button primary--border--button disabled--button center--icon--button center--icon--button"><button class="css--button primary--border--button disabled--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>

      <div class="hint--top large--button--container" aria-label="css--button primary--button disabled--button large--button"><button class="css--button primary--button disabled--button large--button">Large Button</button></div>  

      <div class="hint--top large--button--container" aria-label="css--button primary--border--button disabled--button large--button"><button class="css--button primary--border--button disabled--button large--button">Large Button</button></div>  
      <!--   primary disabled -->

    </div>
    <!--   primary button -->


    <!--   secondary button -->
    <h3>Secondary Buttons</h3>
    <div class="css--buttons--container">

      <!--   secondary -->
      <div class="hint--top" aria-label="css--button secondary--button"><button class="css--button secondary--button">Button</button></div>  
      
      <div class="hint--top" aria-label="css--button secondary--button radius--button"><button class="css--button secondary--button radius--button">Button</button></div>  
      
      <div class="hint--top" aria-label="css--button secondary--button left--icon--button"><button class="css--button secondary--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>  
      
      <div class="hint--top" aria-label="css--button secondary--button right--icon--button"><button class="css--button secondary--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>  
      
      <div class="hint--top" aria-label="css--button secondary--button center--icon--button"><button class="css--button secondary--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>  

      <div class="hint--top" aria-label="css--button secondary--border--button"><button class="css--button secondary--border--button">Button</button></div>  

      <div class="hint--top" aria-label="css--button secondary--border--button radius--button"><button class="css--button secondary--border--button radius--button">Button</button></div>  

      <div class="hint--top" aria-label="css--button secondary--border--button left--icon--button"><button class="css--button secondary--border--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>  

      <div class="hint--top" aria-label="css--button secondary--border--button right--icon--button"><button class="css--button secondary--border--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>  

      <div class="hint--top" aria-label="css--button secondary--border--button center--icon--button"><button class="css--button secondary--border--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>  

      <div class="hint--top large--button--container" aria-label="css--button secondary--button large--button"><button class="css--button secondary--button large--button">Large Button</button></div>  

      <div class="hint--top large--button--container" aria-label="css--button secondary--border--button large--button"><button class="css--button secondary--border--button large--button">Large Button</button></div>  
      <!--   secondary -->
    
    </div>
    
    
    <h3>Secondary Disabled Buttons</h3>
    <div class="css--buttons--container">

      <!--   secondary disabled -->      
      <div class="hint--top" aria-label="css--button secondary--button disabled--button"><button class="css--button secondary--button disabled--button">Button</button></div>

      <div class="hint--top" aria-label="css--button secondary--button disabled--button radius--button"><button class="css--button secondary--button disabled--button radius--button">Button</button></div>

      <div class="hint--top" aria-label="css--button secondary--button disabled--button left--icon--button"><button class="css--button secondary--button disabled--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button secondary--button disabled--button right--icon--button"><button class="css--button secondary--button disabled--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button secondary--button disabled--button center--icon--button"><button class="css--button secondary--button disabled--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>
      
      <div class="hint--top" aria-label="css--button secondary--border--button disabled--button"><button class="css--button secondary--border--button disabled--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button secondary--border--button disabled--button radius--button"><button class="css--button secondary--border--button disabled--button radius--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button secondary--border--button disabled--button left--icon--button"><button class="css--button secondary--border--button disabled--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button secondary--border--button disabled--button right--icon--button"><button class="css--button secondary--border--button disabled--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button secondary--border--button disabled--button center--icon--button"><button class="css--button secondary--border--button disabled--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>

      <div class="hint--top large--button--container" aria-label="css--button secondary--button disabled--button large--button"><button class="css--button secondary--button disabled--button large--button">Large Button</button></div>  

      <div class="hint--top large--button--container" aria-label="css--button secondary--border--button disabled--button large--button"><button class="css--button secondary--border--button disabled--button large--button">Large Button</button></div>  
      <!--   secondary disabled -->

    </div>
    <!--   secondary button -->


    <!--   success button -->
    <h3>Success Buttons</h3>
    <div class="css--buttons--container">

      <!--   success -->
      <div class="hint--top" aria-label="css--button success--button"><button class="css--button success--button">Button</button></div>  
      
      <div class="hint--top" aria-label="css--button success--button radius--button"><button class="css--button success--button radius--button">Button</button></div>  

      <div class="hint--top" aria-label="css--button success--button left--icon--button"><button class="css--button success--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>  
      
      <div class="hint--top" aria-label="css--button success--button right--icon--button"><button class="css--button success--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>  
      
      <div class="hint--top" aria-label="css--button success--button center--icon--button"><button class="css--button success--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>  

      <div class="hint--top" aria-label="css--button success--border--button"><button class="css--button success--border--button">Button</button></div>  

      <div class="hint--top" aria-label="css--button success--border--button radius--button"><button class="css--button success--border--button radius--button">Button</button></div>  

      <div class="hint--top" aria-label="css--button success--border--button left--icon--button"><button class="css--button success--border--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>  

      <div class="hint--top" aria-label="css--button success--border--button left--icon--button"><button class="css--button success--border--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>  

      <div class="hint--top" aria-label="css--button success--border--button center--icon--button"><button class="css--button success--border--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>  

      <div class="hint--top large--button--container" aria-label="css--button success--button large--button"><button class="css--button success--button large--button">Large Button</button></div>  

      <div class="hint--top large--button--container" aria-label="css--button success--border--button large--button"><button class="css--button success--border--button large--button">Large Button</button></div>  
      <!--   success -->

    </div>
    
    
    <h3>Success Disabled Buttons</h3>
    <div class="css--buttons--container">
        
      <!--   success disabled -->
      <div class="hint--top" aria-label="css--button success--button disabled--button"><button class="css--button success--button disabled--button">Button</button></div>

      <div class="hint--top" aria-label="css--button success--button disabled--button radius--button"><button class="css--button success--button disabled--button radius--button">Button</button></div>

      <div class="hint--top" aria-label="css--button success--button disabled--button left--icon--button"><button class="css--button success--button disabled--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>

      <div class="hint--top" aria-label="css--button success--button disabled--button right--icon--button"><button class="css--button success--button disabled--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>

      <div class="hint--top" aria-label="css--button success--button disabled--button center--icon--button"><button class="css--button success--button disabled--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>
      
      <div class="hint--top" aria-label="css--button success--border--button disabled--button"><button class="css--button success--border--button disabled--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button success--border--button disabled--button radius--button"><button class="css--button success--border--button disabled--button radius--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button success--border--button disabled--button left--icon--button"><button class="css--button success--border--button disabled--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button success--border--button disabled--button right--icon--button"><button class="css--button success--border--button disabled--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button success--border--button disabled--button center--icon--button"><button class="css--button success--border--button disabled--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>

      <div class="hint--top large--button--container" aria-label="css--button success--button disabled--button large--button"><button class="css--button success--button disabled--button large--button">Large Button</button></div>  

      <div class="hint--top large--button--container" aria-label="css--button success--border--button disabled--button large--button"><button class="css--button success--border--button disabled--button large--button">Large Button</button></div>  
      <!--   success disabled -->
      
    </div>
    <!--   success button -->


    <!--   danger button -->
    <h3>Danger Buttons</h3>
    <div class="css--buttons--container">

      <!--   danger -->
      <div class="hint--top" aria-label="css--button danger--button"><button class="css--button danger--button">Button</button></div> 
      
      <div class="hint--top" aria-label="css--button danger--button radius--button"><button class="css--button danger--button radius--button">Button</button></div> 

      <div class="hint--top" aria-label="css--button danger--button left--icon--button"><button class="css--button danger--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div> 

      <div class="hint--top" aria-label="css--button danger--button right--icon--button"><button class="css--button danger--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div> 

      <div class="hint--top" aria-label="css--button danger--button center--icon--button"><button class="css--button danger--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div> 

      <div class="hint--top" aria-label="css--button danger--border--button"><button class="css--button danger--border--button">Button</button></div>    

      <div class="hint--top" aria-label="css--button danger--border--button radius--button"><button class="css--button danger--border--button radius--button">Button</button></div>    

      <div class="hint--top" aria-label="css--button danger--border--button left--icon--button"><button class="css--button danger--border--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>    

      <div class="hint--top" aria-label="css--button danger--border--button right--icon--button"><button class="css--button danger--border--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>    

      <div class="hint--top" aria-label="css--button danger--border--button center--icon--button"><button class="css--button danger--border--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>    

      <div class="hint--top large--button--container" aria-label="css--button danger--button large--button"><button class="css--button danger--button large--button">Large Button</button></div>  

      <div class="hint--top large--button--container" aria-label="css--button danger--border--button large--button"><button class="css--button danger--border--button large--button">Large Button</button></div>  
      <!--   danger -->

    </div>
    
    
    <h3>Danger Disabled Buttons</h3>
    <div class="css--buttons--container">
        
      <!--   danger disabled -->
      <div class="hint--top" aria-label="css--button danger--button disabled--button"><button class="css--button danger--button disabled--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button danger--button disabled--button radius--button"><button class="css--button danger--button disabled--button radius--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button danger--button disabled--button left--icon--button"><button class="css--button danger--button disabled--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button danger--button disabled--button right--icon--button"><button class="css--button danger--button disabled--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button danger--button disabled--button center--icon--button"><button class="css--button danger--button disabled--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>
      
      <div class="hint--top" aria-label="css--button danger--border--button disabled--button"><button class="css--button danger--border--button disabled--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button danger--border--button disabled--button radius--button"><button class="css--button danger--border--button disabled--button radius--button">Button</button></div>

      <div class="hint--top" aria-label="css--button danger--border--button disabled--button left--icon--button"><button class="css--button danger--border--button disabled--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>

      <div class="hint--top" aria-label="css--button danger--border--button disabled--button right--icon--button"><button class="css--button danger--border--button disabled--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>

      <div class="hint--top" aria-label="css--button danger--border--button disabled--button center--icon--button"><button class="css--button danger--border--button disabled--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>

      <div class="hint--top large--button--container" aria-label="css--button danger--button disabled--button large--button"><button class="css--button danger--button disabled--button large--button">Large Button</button></div>  

      <div class="hint--top large--button--container" aria-label="css--button danger--border--button disabled--button large--button"><button class="css--button danger--border--button disabled--button large--button">Large Button</button></div>  
      <!--   danger disabled -->

    </div>
    <!--   danger button -->


    <!--   warning button -->
    <h3>Warning Buttons</h3>
    <div class="css--buttons--container">
      
      <!--   warning bg -->
      <div class="hint--top" aria-label="css--button warning--button"><button class="css--button warning--button">Button</button></div>  

      <div class="hint--top" aria-label="css--button warning--button radius--button"><button class="css--button warning--button radius--button">Button</button></div>  

      <div class="hint--top" aria-label="css--button warning--button left--icon--button"><button class="css--button warning--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>  
      
      <div class="hint--top" aria-label="css--button warning--button right--icon--button"><button class="css--button warning--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>  

      <div class="hint--top" aria-label="css--button warning--button center--icon--button"><button class="css--button warning--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>  

      <div class="hint--top" aria-label="css--button warning--border--button"><button class="css--button warning--border--button">Button</button></div>

      <div class="hint--top" aria-label="css--button warning--border--button radius--button"><button class="css--button warning--border--button radius--button">Button</button></div>

      <div class="hint--top" aria-label="css--button warning--border--button left--icon--button"><button class="css--button warning--border--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>

      <div class="hint--top" aria-label="css--button warning--border--button right--icon--button"><button class="css--button warning--border--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>

      <div class="hint--top" aria-label="css--button warning--border--button center--icon--button"><button class="css--button warning--border--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>

      <div class="hint--top large--button--container" aria-label="css--button warning--button large--button"><button class="css--button warning--button large--button">Large Button</button></div>  

      <div class="hint--top large--button--container" aria-label="css--button warning--border--button large--button"><button class="css--button warning--border--button large--button">Large Button</button></div>  
      <!--   warning bg -->
  
    </div>
    
    
    <h3>Warning Disabled Buttons</h3>
    <div class="css--buttons--container">
      
      <!--   warning border -->
      <div class="hint--top" aria-label="css--button warning--button disabled--button"><button class="css--button warning--button disabled--button">Button</button></div>

      <div class="hint--top" aria-label="css--button warning--button disabled--button radius--button"><button class="css--button warning--button disabled--button radius--button">Button</button></div>

      <div class="hint--top" aria-label="css--button warning--button disabled--button left--icon--button"><button class="css--button warning--button disabled--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>

      <div class="hint--top" aria-label="css--button warning--button disabled--button right--icon--button"><button class="css--button warning--button disabled--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>      

      <div class="hint--top" aria-label="css--button warning--button disabled--button center--icon--button"><button class="css--button warning--button disabled--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>
      
      <div class="hint--top" aria-label="css--button warning--border--button disabled--button"><button class="css--button warning--border--button disabled--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button warning--border--button disabled--button radius--button"><button class="css--button warning--border--button disabled--button radius--button">Button</button></div>
      
      <div class="hint--top" aria-label="css--button warning--border--button disabled--button left--icon--button"><button class="css--button warning--border--button disabled--button left--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button warning--border--button disabled--button right--icon--button"><button class="css--button warning--border--button disabled--button right--icon--button"><i class="fa fa-paper-plane-o"></i> Button</button></div>
      
      <div class="hint--top" aria-label="css--button warning--border--button disabled--button center--icon--button"><button class="css--button warning--border--button disabled--button center--icon--button"><i class="fa fa-paper-plane-o"></i></button></div>

      <div class="hint--top large--button--container" aria-label="css--button warning--button disabled--button large--button"><button class="css--button warning--button disabled--button large--button">Large Button</button></div>  

      <div class="hint--top large--button--container" aria-label="css--button warning--border--button disabled--button large--button"><button class="css--button warning--border--button disabled--button large--button">Large Button</button></div>  
      <!--   warning border -->

    </div>
    <!--   warning button   -->
  
    <!-- signature -->
    <div class="signature-wrapper">
      <div class="signature-title">
        Hey there, I'm Nitish, a frontend developer.
      </div>
      
      <a class="signature-link" target="_blank" href="https://nikkk.me/">Portfolio</a>
    </div>
    <!-- signature -->
  </div>

// demo style
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #121212;
}

h3 {
  text-align: center;
  margin: 70px 0 20px;
}

.main--container {
  border-radius: 10px;
  margin: 20px auto;
  padding: 40px;
  max-width: 800px;
  background: #ffffff;
}

.main--container .large--button--container {
  width: 43%;
  display: inline-block;
}

.css--buttons--title {
  font-size: 40px;
  text-align: center;
  margin: 20px 0 30px;
}

.css--buttons--container {
  text-align: center;
}

.css--buttons--container>div {
  margin: 20px;
}
// demo style


// button style
$button--white--color: #FFFFFF; 
$button--font--size: 15px;
$button--icon--padding--left--right: 20px; 
$button--default--bgcolor: #F7F7F7;
$button--default--color: #555555;
$button--primary--bgcolor: #5CCFE9;
$button--secondary--bgcolor: #5A68C6;
$button--success--bgcolor: #36C398;
$button--danger--bgcolor: #EE352E;
$button--warning--bgcolor: #FFD331;
$button--radius: 50px;

.css--button--icon--padding{
  padding-left: $button--icon--padding--left--right !important;
  padding-right: $button--icon--padding--left--right !important;
}

.css--button--background--hover--effect{
  background: transparent;
  box-shadow: 0px 0px 0px 1px inset;
}

// button style
.css--button{
  transition: background 300ms, color 300ms, box-shadow 300ms; 
  background: $button--default--bgcolor;
  font-size: $button--font--size;
  color: $button--default--color;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  padding: 15px 30px;
  cursor: pointer;
  border-width: 0;
  outline: none;
  border-radius: 2px;
  
  &:hover{
    @extend .css--button--background--hover--effect;
  }
}

// button icon
.css--button i{
  vertical-align: middle;
}

// button border
.border--button{
  background: transparent;
  box-shadow: 0px 0px 0px 1px inset;
}

// button disabled
.disabled--button{
  pointer-events: none;
  opacity: 0.5;
}

// button radius
.radius--button{
  border-radius: $button--radius;
}

// button default border
.default--border--button{
  @extend .border--button;
  
  &:hover{
    background: $button--default--bgcolor;
    box-shadow: 0px 0px 0px 1px $button--default--bgcolor inset;
  }
}

// button center icon
.center--icon--button{
  @extend .css--button--icon--padding;
}

// button left icon
.left--icon--button{
  @extend .css--button--icon--padding;
  > i{
    margin-right: 5px;
  }
}

// button right icon
.right--icon--button{
  @extend .css--button--icon--padding;
  direction: rtl;
  > i{
    margin-left: 5px;
  }
}

// button large
.large--button{
  display: block;
  width: 100%;
}

// primary button
.primary--button{
  background: $button--primary--bgcolor;
  color: $button--white--color;

  &:hover{
    @extend .css--button--background--hover--effect;
    color: $button--primary--bgcolor;
  }
}

.primary--border--button{
  @extend .border--button;
  color: $button--primary--bgcolor;
  
  &:hover{
    background: $button--primary--bgcolor;
    color: $button--white--color;
    box-shadow: 0px 0px 0px 1px $button--primary--bgcolor inset;
  }
}

// secondary button
.secondary--button{
  background: $button--secondary--bgcolor;
  color: $button--white--color;

  &:hover{
    @extend .css--button--background--hover--effect;
    color: $button--secondary--bgcolor;
  }
}

.secondary--border--button{
  @extend .border--button;
  color: $button--secondary--bgcolor;

  &:hover{
    background: $button--secondary--bgcolor;
    color: $button--white--color;
    box-shadow: 0px 0px 0px 1px $button--secondary--bgcolor inset;
  }
}

// success button
.success--button{
  background: $button--success--bgcolor;
  color: $button--white--color;
  
  &:hover{
    @extend .css--button--background--hover--effect;
    color: $button--success--bgcolor;
  }
}

.success--border--button{
  @extend .border--button;
  color: $button--success--bgcolor;

  &:hover{
    background: $button--success--bgcolor;
    color: $button--white--color;
    box-shadow: 0px 0px 0px 1px $button--success--bgcolor inset;
  }
}

// danger button
.danger--button{
  background: $button--danger--bgcolor;
  color: $button--white--color;
  
  &:hover{
    @extend .css--button--background--hover--effect;
    color: $button--danger--bgcolor;
  }
}

.danger--border--button{
  @extend .border--button;
  color: $button--danger--bgcolor;

  &:hover{
    background: $button--danger--bgcolor;
    color: $button--white--color;
    box-shadow: 0px 0px 0px 1px $button--danger--bgcolor inset;
  }
}

// warning button
.warning--button{
  background: $button--warning--bgcolor;
  color: $button--white--color;

  &:hover{
    @extend .css--button--background--hover--effect;
    color: $button--warning--bgcolor;
  }
}

.warning--border--button{
  @extend .border--button;
  color: $button--warning--bgcolor;

  &:hover{
    background: $button--warning--bgcolor;
    color: $button--white--color;
    box-shadow: 0px 0px 0px 1px $button--warning--bgcolor inset;
  }
}
// button style

// signature
.signature-wrapper {
  margin-top: 150px;
  margin-bottom: 100px;
  text-align: center;
  
  .signature-title {
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: normal;
  }
  
  .signature-link {
    color: #f36e2e;
    display: inline-block;
    margin: 20px 0 10px;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-bottom: solid 2px #ddd 
  }
}