Border button can be made by using just .border-btn
class
Rounded buttons can be get by using a class .rounded
to .rounded-4x
and .circular
Animated buttons can be get by using a class .btn-icon
and then using the directional classfor animation like for `left` use class .btn-icon-left
and for `right` use class .btn-icon-right
and then simply adding a icon using span
in button
<!-- Buttons -->
<!-- General Buttons -->
<!-- Default Buttons -->
<button class="btn btn-default btn-lg">Default</button>
<button class="btn btn-default btn-md">Default</button>
<button class="btn btn-default btn-sm">Default</button>
<button class="btn btn-default btn-xs">Default</button>
<br><br>
<!-- Primary buttons -->
<button class="btn btn-primary btn-lg">Primary</button>
<button class="btn btn-primary btn-md">Primary</button>
<button class="btn btn-primary btn-sm">Primary</button>
<button class="btn btn-primary btn-xs">Primary</button>
<br><br>
<!-- Success Buttons -->
<button class="btn btn-success btn-lg">Success</button>
<button class="btn btn-success btn-md">Success</button>
<button class="btn btn-success btn-sm">Success</button>
<button class="btn btn-success btn-xs">Success</button>
<br><br>
<!-- Info Buttons -->
<button class="btn btn-info btn-lg">Info</button>
<button class="btn btn-info btn-md">Info</button>
<button class="btn btn-info btn-sm">Info</button>
<button class="btn btn-info btn-xs">Info</button>
<br><br>
<!-- Warning buttons -->
<button class="btn btn-warning btn-lg">Warning</button>
<button class="btn btn-warning btn-md">Warning</button>
<button class="btn btn-warning btn-sm">Warning</button>
<button class="btn btn-warning btn-xs">Warning</button>
<br><br>
<!-- Danger Buttons -->
<button class="btn btn-danger btn-lg">Danger</button>
<button class="btn btn-danger btn-md">Danger</button>
<button class="btn btn-danger btn-sm">Danger</button>
<button class="btn btn-danger btn-xs">Danger</button>
<!-- Border Buttons -->
<!-- Default Buttons -->
<button class="btn btn-default btn-lg border-btn">Default</button>
<button class="btn btn-default btn-md border-btn">Default</button>
<button class="btn btn-default btn-sm border-btn">Default</button>
<button class="btn btn-default btn-xs border-btn">Default</button>
<br><br>
<!-- Primary buttons -->
<button class="btn btn-primary btn-lg border-btn">Primary</button>
<button class="btn btn-primary btn-md border-btn">Primary</button>
<button class="btn btn-primary btn-sm border-btn">Primary</button>
<button class="btn btn-primary btn-xs border-btn">Primary</button>
<br><br>
<!-- Success Buttons -->
<button class="btn btn-success btn-lg border-btn">Success</button>
<button class="btn btn-success btn-md border-btn">Success</button>
<button class="btn btn-success btn-sm border-btn">Success</button>
<button class="btn btn-success btn-xs border-btn">Success</button>
<br><br>
<!-- Info Buttons -->
<button class="btn btn-info btn-lg border-btn">Info</button>
<button class="btn btn-info btn-md border-btn">Info</button>
<button class="btn btn-info btn-sm border-btn">Info</button>
<button class="btn btn-info btn-xs border-btn">Info</button>
<br><br>
<!-- Warning buttons -->
<button class="btn btn-warning btn-lg border-btn">Warning</button>
<button class="btn btn-warning btn-md border-btn">Warning</button>
<button class="btn btn-warning btn-sm border-btn">Warning</button>
<button class="btn btn-warning btn-xs border-btn">Warning</button>
<br><br>
<!-- Danger Buttons -->
<button class="btn btn-danger btn-lg border-btn">Danger</button>
<button class="btn btn-danger btn-md border-btn">Danger</button>
<button class="btn btn-danger btn-sm border-btn">Danger</button>
<button class="btn btn-danger btn-xs border-btn">Danger</button>
<h3 class="heading txt-sm">Rounded Buttons</h3>
<p>Rounded buttons can be get by using a class <code>.rounded</code> to <code>.rounded-4x</code></p>
<!-- Rounded Buttons -->
<button class="btn btn-primary btn-lg border-btn rounded">Danger</button>
<button class="btn btn-info btn-lg border-btn rounded-2x">Danger</button>
<button class="btn btn-warning btn-lg border-btn rounded-3x">Danger</button>
<button class="btn btn-danger btn-lg border-btn rounded-4x">Danger</button>
<!-- Animated Buttons -->
<!-- Default Buttons -->
<button class="btn btn-default btn-lg btn-icon btn-icon-left"><span class="fa fa-chevron-right"></span>Default</button>
<button class="btn btn-default btn-md btn-icon btn-icon-left"><span class="fa fa-chevron-right"></span>Default</button>
<button class="btn btn-default btn-sm btn-icon btn-icon-left"><span class="fa fa-chevron-right"></span>Default</button>
<button class="btn btn-default btn-xs btn-icon btn-icon-left"><span class="fa fa-chevron-right"></span>Default</button>
<br><br>
<!-- Primary buttons -->
<button class="btn btn-primary btn-lg btn-icon btn-icon-right">Primary<span class="fa fa-chevron-right"></span></button>
<button class="btn btn-primary btn-md btn-icon btn-icon-right">Primary<span class="fa fa-chevron-right"></span></button>
<button class="btn btn-primary btn-sm btn-icon btn-icon-right">Primary<span class="fa fa-chevron-right"></span></button>
<button class="btn btn-primary btn-xs btn-icon btn-icon-right">Primary<span class="fa fa-chevron-right"></span></button>
<br><br>
<!-- Success Buttons -->
<button class="btn btn-success btn-lg btn-icon btn-icon-left"><span class="fa fa-chevron-right"></span>Success</button>
<button class="btn btn-success btn-md btn-icon btn-icon-left"><span class="fa fa-chevron-right"></span>Success</button>
<button class="btn btn-success btn-sm btn-icon btn-icon-left"><span class="fa fa-chevron-right"></span>Success</button>
<button class="btn btn-success btn-xs btn-icon btn-icon-left"><span class="fa fa-chevron-right"></span>Success</button>
<br><br>
<!-- Info Buttons -->
<button class="btn btn-info btn-lg btn-icon btn-icon-right">Info<span class="fa fa-chevron-right"></span></button>
<button class="btn btn-info btn-md btn-icon btn-icon-right">Info<span class="fa fa-chevron-right"></span></button>
<button class="btn btn-info btn-sm btn-icon btn-icon-right">Info<span class="fa fa-chevron-right"></span></button>
<button class="btn btn-info btn-xs btn-icon btn-icon-right">Info<span class="fa fa-chevron-right"></span></button>
<br><br>
<!-- Warning buttons -->
<button class="btn btn-warning btn-lg btn-icon btn-icon-left"><span class="fa fa-chevron-right"></span>Warning</button>
<button class="btn btn-warning btn-md btn-icon btn-icon-left"><span class="fa fa-chevron-right"></span>Warning</button>
<button class="btn btn-warning btn-sm btn-icon btn-icon-left"><span class="fa fa-chevron-right"></span>Warning</button>
<button class="btn btn-warning btn-xs btn-icon btn-icon-left"><span class="fa fa-chevron-right"></span>Warning</button>
<br><br>
<!-- Danger Buttons -->
<button class="btn btn-danger btn-lg btn-icon btn-icon-right">Danger<span class="fa fa-chevron-right"></span></button>
<button class="btn btn-danger btn-md btn-icon btn-icon-right">Danger<span class="fa fa-chevron-right"></span></button>
<button class="btn btn-danger btn-sm btn-icon btn-icon-right">Danger<span class="fa fa-chevron-right"></span></button>
<button class="btn btn-danger btn-xs btn-icon btn-icon-right">Danger<span class="fa fa-chevron-right"></span></button>