1
2
3
4
5
6
7
8
9

<button type="button" class="btn btn-borders btn-default mr-xs mb-sm">Default</button>
<button type="button" class="btn btn-borders btn-primary mr-xs mb-sm">Primary</button>
<button type="button" class="btn btn-borders btn-secondary mr-xs mb-sm">Secondary</button>
<button type="button" class="btn btn-borders btn-tertiary mr-xs mb-sm">Tertiary</button>
<button type="button" class="btn btn-borders btn-quaternary mr-xs mb-sm">Quaternary</button>
<button type="button" class="btn btn-borders btn-success mr-xs mb-sm">Success</button>
<button type="button" class="btn btn-borders btn-info mr-xs mb-sm">Info</button>
<button type="button" class="btn btn-borders btn-warning mr-xs mb-sm">Warning</button>
<button type="button" class="btn btn-borders btn-danger mr-xs mb-sm">Danger</button>

1
2
3
4
5
6
7
8
9

<button type="button" class="btn btn-3d btn-default mr-xs mb-sm">Default</button>
<button type="button" class="btn btn-3d btn-primary mr-xs mb-sm">Primary</button>
<button type="button" class="btn btn-3d btn-secondary mr-xs mb-sm">Secondary</button>
<button type="button" class="btn btn-3d btn-tertiary mr-xs mb-sm">Tertiary</button>
<button type="button" class="btn btn-3d btn-quaternary mr-xs mb-sm">Quaternary</button>
<button type="button" class="btn btn-3d btn-success mr-xs mb-sm">Success</button>
<button type="button" class="btn btn-3d btn-info mr-xs mb-sm">Info</button>
<button type="button" class="btn btn-3d btn-warning mr-xs mb-sm">Warning</button>
<button type="button" class="btn btn-3d btn-danger mr-xs mb-sm">Danger</button>

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

<button type="button" class="btn btn-primary btn-lg">Large Size</button>
<button type="button" class="btn btn-borders btn-primary btn-lg">Large Size</button>
<button type="button" class="btn btn-3d btn-primary btn-lg">Large Size</button>

<button type="button" class="btn btn-primary">Default Size</button>
<button type="button" class="btn btn-borders btn-primary">Default Size</button>
<button type="button" class="btn btn-3d btn-primary">Default Size</button>

<button type="button" class="btn btn-primary btn-sm">Small Size</button>
<button type="button" class="btn btn-borders btn-primary btn-sm">Small Size</button>
<button type="button" class="btn btn-3d btn-primary btn-sm">Small Size</button>

<button type="button" class="btn btn-primary btn-xs">Extra Small Size</button>
<button type="button" class="btn btn-borders btn-primary btn-xs">Extra Small Size</button>
<button type="button" class="btn btn-3d btn-primary btn-xs">Extra Small Size</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 class="mb-xs mt-xs mr-xs btn btn-default" type="button"><em class="fas fa-sync"></em>&nbsp;Refresh</button>
<button class="mb-xs mt-xs mr-xs btn btn-primary" type="button"><em class="fas fa-cloud"></em>&nbsp;Cloud</button>
<button class="mb-xs mt-xs mr-xs btn btn-info" type="button"><em class="fas fa-thumbs-up"></em><span class="btn-text-indent">Thumbs-up</span></button>
<button class="mb-xs mt-xs mr-xs btn btn-borders btn-info" type="button"><em class="fas fa-thumbs-up"></em><span class="btn-text-indent">Thumbs-up</span></button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<ul class="pagination pagination-lg">
	<li class="page-item">
		<a class="page-link" href="#">
			<em class="fas fa-angle-double-left"></em>
			<span class="btn-text-indent">Previous</span>
		</a>
	</li>
	<li class="page-item active"><a class="page-link" href="#">1</a></li>
	<li class="page-item"><a class="page-link" href="#">2</a></li>
	<li class="page-item"><a class="page-link" href="#">3</a></li>
	<li class="page-item">
		<a class="page-link" href="#">
			<em class="fas fa-angle-double-right"></em>
			<span class="btn-text-indent">Next</span>
		</a>
	</li>
</ul>

<ul class="pagination">
	<li class="page-item">
		<a class="page-link" href="#">
			<em class="fas fa-angle-double-left"></em>
			<span class="btn-text-indent">Previous</span>
		</a>
	</li>
	<li class="page-item active"><a class="page-link" href="#">1</a></li>
	<li class="page-item"><a class="page-link" href="#">2</a></li>
	<li class="page-item"><a class="page-link" href="#">3</a></li>
	<li class="page-item">
		<a class="page-link" href="#">
			<em class="fas fa-angle-double-right"></em>
			<span class="btn-text-indent">Next</span>
		</a>
	</li>
</ul>

<ul class="pagination pagination-sm">
	<li class="page-item">
		<a class="page-link" href="#">
			<em class="fas fa-angle-double-left"></em>
			<span class="btn-text-indent">Previous</span>
		</a>
	</li>
	<li class="page-item active"><a class="page-link" href="#">1</a></li>
	<li class="page-item"><a class="page-link" href="#">2</a></li>
	<li class="page-item"><a class="page-link" href="#">3</a></li>
	<li class="page-item">
		<a class="page-link" href="#">
			<em class="fas fa-angle-double-right"></em>
			<span class="btn-text-indent">Next</span>
		</a>
	</li>
</ul>