General Buttons
Use a classes btn btn-primary to create a general btn.
Click Copy Button
<button type="button" class="btn btn-primary mb-2 mr-2>Primary</button>
<button type="button" class="btn btn-secondary mb-2 mr-2>Secondary</button>
<button type="button" class="btn btn-success mb-2 mr-2>Success</button>
<button type="button" class="btn btn-danger mb-2 mr-2>Danger</button>
<button type="button" class="btn btn-warning mb-2 mr->Warning</button>
<button type="button" class="btn btn-info mb-2 mr-2>Info</button>
<button type="button" class="btn btn-light mb-2 mr-2>Light</button>
<button type="button" class="btn btn-dark mb-2 mr-2>Dark</button>
<button type="button" class="btn btn-link mb-2 mr-2>Link</button>
Outline Button
Use a classes btn btn-outline-primary to create a outline btn.
Click Copy Button
<button type="button" class="btn btn-outline-primary mb-2 mr-2">Primary</button>
<button type="button" class="btn btn-outline-secondary mb-2 mr-2">Secondary</button>
<button type="button" class="btn btn-outline-success mb-2 mr-2">Success</button>
<button type="button" class="btn btn-outline-danger mb-2 mr-2">Danger</button>
<button type="button" class="btn btn-outline-warning mb-2 mr-2">Warning</button>
<button type="button" class="btn btn-outline-info mb-2 mr-2">Info</button>
<button type="button" class="btn btn-outline-light mb-2 mr-2">Light</button>
<button type="button" class="btn btn-outline-dark mb-2 mr-2">Dark</button>
Rounded Button
Use a classes btn btn-rounded to create a rounded btn.
Click Copy Button
<button type="button" class="btn btn-rounded btn-primary mb-2 mr-2">Primary</button>
<button type="button" class="btn btn-rounded btn-secondary mb-2 mr-2">Secondary</button>
<button type="button" class="btn btn-rounded btn-success mb-2 mr-2">Success</button>
<button type="button" class="btn btn-rounded btn-danger mb-2 mr-2">Danger</button>
<button type="button" class="btn btn-rounded btn-warning mb-2 mr-2">Warning</button>
<button type="button" class="btn btn-rounded btn-info mb-2 mr-2">Info</button>
<button type="button" class="btn btn-rounded btn-light mb-2 mr-2">Light</button>
<button type="button" class="btn btn-rounded btn-dark mb-2 mr-2">Dark</button>
Rounded Outline Button
Use a classes btn btn-rounded btn-outline-primary to create a rounded outline btn.
Click Copy Button
<button type="button" class="btn btn-rounded btn-outline-primary mb-2 mr-2">Primary</button>
<button type="button" class="btn btn-rounded btn-outline-secondary mb-2 mr-2">Secondary</button>
<button type="button" class="btn btn-rounded btn-outline-success mb-2 mr-2">Success</button>
<button type="button" class="btn btn-rounded btn-outline-danger mb-2 mr-2">Danger</button>
<button type="button" class="btn btn-rounded btn-outline-warning mb-2 mr-2">Warning</button>
<button type="button" class="btn btn-rounded btn-outline-info mb-2 mr-2">Info</button>
<button type="button" class="btn btn-rounded btn-outline-light mb-2 mr-2">Light</button>
<button type="button" class="btn btn-rounded btn-outline-dark mb-2 mr-2">Dark</button>
Circle buttons
Use a classes btn btn-circle btn-success to quickly create a General btn.
Click Copy Button
<button type="button" class="btn btn-secondary btn-circle mb-2"><i class="fa fa-check"></i> </button>
<button type="button" class="btn btn-primary btn-circle mb-2"><i class="fa fa-list"></i> </button>
<button type="button" class="btn btn-success btn-circle mb-2"><i class="fa fa-link"></i> </button>
<button type="button" class="btn btn-info btn-circle mb-2"><i class="fa fa-check"></i> </button>
<button type="button" class="btn btn-warning btn-circle mb-2"><i class="fa fa-times"></i> </button>
<button type="button" class="btn btn-danger btn-circle mb-2"><i class="fa fa-heart"></i> </button>
Circle Large buttons
Use a classes btn btn-circle btn-lg btn-success to quickly create a General btn.
Click Copy Button
<button type="button" class="btn btn-secondary btn-circle btn-lg mb-2"><i class="fa fa-check"></i> </button>
<button type="button" class="btn btn-primary btn-circle btn-lg mb-2"><i class="fa fa-list"></i> </button>
<button type="button" class="btn btn-success btn-circle btn-lg mb-2"><i class="fa fa-link"></i> </button>
<button type="button" class="btn btn-info btn-circle btn-lg mb-2"><i class="fa fa-check"></i> </button>
<button type="button" class="btn btn-warning btn-circle btn-lg mb-2"><i class="fa fa-times"></i> </button>
<button type="button" class="btn btn-danger btn-circle btn-lg mb-2"><i class="fa fa-heart"></i> </button>
Circle xtra Large buttons
Use a classes btn btn-circle btn-xl btn-success to quickly create a General btn.
Click Copy Button
<button type="button" class="btn btn-secondary btn-circle btn-xl mb-2"><i class="fa fa-check"></i> </button>
<button type="button" class="btn btn-primary btn-circle btn-xl mb-2"><i class="fa fa-list"></i> </button>
<button type="button" class="btn btn-success btn-circle btn-xl mb-2"><i class="fa fa-link"></i> </button>
<button type="button" class="btn btn-info btn-circle btn-xl mb-2"><i class="fa fa-check"></i> </button>
<button type="button" class="btn btn-warning btn-circle btn-xl mb-2"><i class="fa fa-times"></i> </button>
Social buttons
Use a classes btn btn-facebook to quickly create a General btn.
Click Copy Button
<button class="btn btn-facebook waves-effect waves-light mb-2" type="button"> <i class="fa fa-facebook"></i> </button>
<button class="btn btn-twitter waves-effect waves-light mb-2" type="button"> <i class="fa fa-twitter"></i>></button>
<button class="btn btn-googleplus waves-effect waves-light mb-2" type="button"> <i class="fa fa-google-plus"></i> </button>
<button class="btn btn-linkedin waves-effect waves-light mb-2" type="button"> <i class="fa fa-linkedin"></i> </button>
<button class="btn btn-instagram waves-effect waves-light mb-2" type="button"> <i class="fa fa-instagram"></i> </button>
<button class="btn btn-pinterest waves-effect waves-light mb-2" type="button"> <i class="fa fa-pinterest"></i> </button>
<button class="btn btn-dribbble waves-effect waves-light mb-2" type="button"> <i class="fa fa-dribbble"></i> </button>
<button class="btn btn-youtube waves-effect waves-light mb-2" type="button"> <i class="fa fa-youtube"></i> </button>
With Circle buttons
Use a classes btn btn-circle btn-success to quickly create a General btn.
Button Size
Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.
Rounded Button Size
Use a classes btn btn-rounded btn-lg or btn-sm to create a rounded btn.
Rounded Outline Button Size
Use a classes btn btn-rounded btn-outline-primary btn-lg or btn-sm to create a rounded outline btn.
Button with icon
Use a classes ti-settings to create a button with icon.