Shortcodes Typography

Buttons

Buttons

General Buttons











Border Buttons

Border button can be made by using just .border-btn class











Rounded Buttons

Rounded buttons can be get by using a class .rounded to .rounded-4x and .circular

Animated Buttons

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>