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

<button type="button" id="loadingButton" data-loading-text="Loading..." class="btn btn-primary">
    Click Here!
</button>

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

<script>
    // Button Loading
    $('#loadingButton').on('click', function () {
        var $btn = $(this).button('loading')
        // Business Logic...

        setTimeout(function () {
            // Reset Button
            $btn.button('reset');
        }, 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>