Buttons

Elementric components - just copy the HTML code of an element and paste it into your code (after you read the installation guide).

Types

Below you can find several types of buttons that can be used by copying the HTML code. They differ only by the class (.button-standard, .button-light, etc...)

Default

Button Link Standard Light Dark Success Danger Warning

           
Copy
           
  <button type="button" class="button-link">Button Link</button>
  <button type="button" class="button-standard">Standard</button>
  <button type="button" class="button-light">Light</button>
  <button type="button" class="button-dark">Dark</button>
  <button type="button" class="button-success">Success</button>
  <button type="button" class="button-danger">Danger</button>
  <button type="button" class="button-warning">Warning</button>
           
         

Outline

Standard Light Dark Success Danger Warning

           
Copy
           
  <button type="button" class="button-outline-standard">Standard</button>
  <button type="button" class="button-outline-light">Light</button>
  <button type="button" class="button-outline-dark">Dark</button>
  <button type="button" class="button-outline-success">Success</button>
  <button type="button" class="button-outline-danger">Danger</button>
  <button type="button" class="button-outline-warning">Warning</button>
           
         

Square

If you want to make any button a square one, add the class .square

Standard Light Dark Success Danger Warning

             
Copy
             
  <button type="button" class="button-standard square">Standard</button>
  <button type="button" class="button-light square">Light</button>
  <button type="button" class="button-dark square">Dark</button>
  <button type="button" class="button-success square">Success</button>
  <button type="button" class="button-danger square">Danger</button>
  <button type="button" class="button-warning square">Warning</button>
             
           

Square Outline

If you want to make any button a square one, add the class .square

Standard Light Dark Success Danger Warning

               
Copy
               
  <button type="button" class="button-outline-standard square">Standard</button>
  <button type="button" class="button-outline-light square">Light</button>
  <button type="button" class="button-outline-dark square">Dark</button>
  <button type="button" class="button-outline-success square">Success</button>
  <button type="button" class="button-outline-danger square">Danger</button>
  <button type="button" class="button-outline-warning square">Warning</button>
               
             

Icon

The icons used are from FontAwesome Icons.

Learn more about usage

               
Copy
               
  <button type="button" class="button-icon"> <i class="fas fa-home"></i> </button>
  <button type="button" class="button-icon"> <i class="fas fa-bars"></i> </button>
               
             

Circle

If you want to make any button a round one, add the class .circle

Standard

              
Copy
              
  <button type="button" class="button-standard circle">Standard</button>
  <button type="button" class="button-standard circle"> <i class="fas fa-home"></i> </button>
  <button type="button" class="button-light circle"> <i class="fas fa-bars"></i> </button>
              
            

Gradient

Standard Light Dark Success Danger Warning

              
Copy
              
  <button type="button" class="button-gradient-standard">Standard</button>
  <button type="button" class="button-gradient-light">Light</button>
  <button type="button" class="button-gradient-dark">Dark</button>
  <button type="button" class="button-gradient-success">Success</button>
  <button type="button" class="button-gradient-danger">Danger</button>
  <button type="button" class="button-gradient-warning">Warning</button>
              
            

Sizing

Just add a sizing class to your button to change the size. (.button-sm, .button-md, .button-lg, .button-xlg)

button-sm button-md Standard button-lg button-xlg

            
Copy
            
  <button type="button" class="button-standard button-sm">button-sm</button>
  <button type="button" class="button-standard button-md">button-md</button>
  <button type="button" class="button-standard">Standard</button>
  <button type="button" class="button-standard button-lg">button-lg</button>
  <button type="button" class="button-standard button-xlg">button-xlg</button>