1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<button type="button" class="btn btn-default w-brd mr-sm mb-sm"><em class="fas fa-star"></em> Default</button>
<button type="button" class="btn btn-pink color_pink w-brd mr-sm mb-sm"><em class="fas fa-cloud"></em> Pink</button>
<button type="button" class="btn btn-blue color_blue w-brd mr-sm mb-sm"><em class="fas fa-leaf"></em> Blue</button>
<button type="button" class="btn btn-green color_green w-brd mr-sm mb-sm"><em class="fas fa-sun"></em> Green</button>
<button type="button" class="btn btn-yellow color_yellow w-brd mr-sm mb-sm"><em class="fas fa-glass-martini"></em> Yellow</button>
<button type="button" class="btn btn-red color_red w-brd mr-sm mb-sm"><em class="fas fa-fire"></em> Red</button>
<button type="button" class="btn btn-lime color_lime w-brd mr-sm mb-sm"><em class="fas fa-asterisk"></em> Lime</button>
<button type="button" class="btn btn-navy color_navy w-brd mr-sm mb-sm"><em class="fas fa-anchor"></em> Navy</button>
<button type="button" class="btn btn-cream color_cream w-brd mr-sm mb-sm"><em class="fas fa-gift"></em> Cream</button>
<button type="button" class="btn btn-midnight color_midnight w-brd mr-sm mb-sm"><em class="fas fa-moon"></em> MidNight</button>
<button type="button" class="btn btn-brown color_brown w-brd mr-sm mb-sm"><em class="fas fa-coffee"></em> Brown</button>
<button type="button" class="btn btn-teal color_teal w-brd mr-sm mb-sm"><em class="fas fa-globe"></em> Teal</button>
<button type="button" class="btn btn-pelorous color_pelorous w-brd mr-sm mb-sm"><em class="fas fa-tree"></em> Pelorous</button>
<button type="button" class="btn btn-skyblue color_skyblue w-brd mr-sm mb-sm"><em class="fas fa-skyatlas"></em> Sky Blue</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<p class="text-center">
    <button type="button" class="btn btn-borders btn-default mr-sm mb-sm"><em class="fas fa-star"></em> Default</button>
    <button type="button" class="btn btn-pink color_pink style_outlined mr-sm mb-sm"><em class="fas fa-cloud"></em> Pink</button>
    <button type="button" class="btn btn-blue color_blue style_outlined mr-sm mb-sm"><em class="fas fa-leaf"></em> Blue</button>
    <button type="button" class="btn btn-green color_green style_outlined mr-sm mb-sm"><em class="fas fa-sun"></em> Green</button>
    <button type="button" class="btn btn-yellow color_yellow style_outlined mr-sm mb-sm"><em class="fas fa-glass-martini"></em> Yellow</button>
    <button type="button" class="btn btn-red color_red style_outlined mr-sm mb-sm"><em class="fas fa-fire"></em> Red</button>
    <button type="button" class="btn btn-lime color_lime style_outlined mr-sm mb-sm"><em class="fas fa-asterisk"></em> Lime</button>
    <button type="button" class="btn btn-navy color_navy style_outlined mr-sm mb-sm"><em class="fas fa-anchor"></em> Navy</button>
</p>
<p class="text-center">
    <button type="button" class="btn btn-cream color_cream style_outlined mr-sm mb-sm"><em class="fas fa-gift"></em> Cream</button>
    <button type="button" class="btn btn-midnight color_midnight style_outlined mr-sm mb-sm"><em class="fas fa-moon"></em> MidNight</button>
    <button type="button" class="btn btn-brown color_brown style_outlined mr-sm mb-sm"><em class="fas fa-coffee"></em> Brown</button>
    <button type="button" class="btn btn-teal color_teal style_outlined mr-sm mb-sm"><em class="fas fa-globe"></em> Teal</button>
    <button type="button" class="btn btn-pelorous color_pelorous style_outlined mr-sm mb-sm"><em class="fas fa-tree"></em> Pelorous</button>
    <button type="button" class="btn btn-skyblue color_skyblue style_outlined mr-sm mb-sm"><em class="fab fa-skyatlas"></em> Sky Blue</button>
    <button type="button" class="btn btn-white color_white style_outlined mr-sm mb-sm"><em class="fas fa-certificate"></em> Light</button>
</p>

1
2
3

<button type="button" class="color_transparent clr-primary w-brd btn-sm mr-sm mb-sm"><em class="fas fa-star"></em> SMALL TRANSPARENT</button>
<button type="button" class="color_transparent clr-primary w-brd mr-sm mb-sm"><em class="fas fa-cloud"></em> MEDIUM TRANSPARENT</button>
<button type="button" class="color_transparent clr-primary w-brd btn-lg mr-sm mb-sm"><em class="fas fa-cloud"></em> LARGE TRANSPARENT</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<button type="button" class="btn btn-primary w-brd mr-xs mb-sm btn-xs text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button>
<button type="button" class="btn btn-borders btn-primary mr-xs mb-sm btn-xs text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button>
<button type="button" class="btn btn-primary w-brd mr-xs mb-sm btn-sm text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button>
<button type="button" class="btn btn-borders btn-primary mr-xs mb-sm btn-sm text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button>
<button type="button" class="btn btn-primary w-brd mr-xs mb-sm text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button>
<button type="button" class="btn btn-borders btn-primary mr-xs mb-sm text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button>
<button type="button" class="btn btn-primary w-brd mr-xs mb-sm btn-md text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button>
<button type="button" class="btn btn-borders btn-primary mr-xs mb-sm btn-md text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button>
<button type="button" class="btn btn-primary w-brd mr-xs mb-sm btn-lg text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button>
<button type="button" class="btn btn-borders btn-primary mr-xs mb-sm btn-lg text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button>
<button type="button" class="btn btn-primary w-brd mr-xs mb-sm btn-xl text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button>
<button type="button" class="btn btn-borders btn-primary mr-xs mb-sm btn-xl text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button>
<button type="button" class="btn btn-primary w-brd mr-xs mb-sm btn-xlg text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button>
<button type="button" class="btn btn-borders btn-primary mr-xs mb-sm btn-xlg text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button>
<button type="button" class="btn btn-primary w-brd mr-xs mb-sm btn-xxl text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button>
<button type="button" class="btn btn-borders btn-primary mr-xs mb-sm btn-xxl text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button>

1
2
3

<p class="text-center">
<button type="button" id="loadingButton" class="btn btn-primary">Click Here!</button>
</p>

 1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
// Button Loading
$('#loadingButton').on('click', function () {
var $this = $(this);
var loadingText = '<em class="fas fa-spinner fa-spin"></em> loading...';
if ($(this).html() !== loadingText) {
$this.data('original-text', $(this).html());
$this.html(loadingText);
}
setTimeout(function () {
$this.html($this.data('original-text'));
}, 2000);
})
</script>

1
2
3
4

<button type="button" class="mb-xs mt-xs mr-xs btn btn-default"><em class="fas fa-refresh"></em> Refresh</button>
<button type="button" class="mb-xs mt-xs mr-xs btn btn-primary"><em class="fas fa-cloud"></em> Cloud</button>
<button type="button" class="mb-xs mt-xs mr-xs btn btn-info"><em class="fas fa-thumbs-up"></em> </button>
<button type="button" class="mb-xs mt-xs mr-xs btn btn-borders btn-info"><em class="fas fa-thumbs-up"></em> </button>

1
2
3
4

<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>

1
2
3
4

<ul class="pager">
    <li class="previous"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>