Buttons

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 class="btn btn-3d btn-default mr-xs mb-sm" type="button">Default</button>
<button class="btn btn-3d btn-primary mr-xs mb-sm" type="button">Primary</button>
<button class="btn btn-3d btn-secondary mr-xs mb-sm" type="button">Secondary</button>
<button class="btn btn-3d btn-tertiary mr-xs mb-sm" type="button">Tertiary</button>
<button class="btn btn-3d btn-quaternary mr-xs mb-sm" type="button">Quaternary</button>
<button class="btn btn-3d btn-success mr-xs mb-sm" type="button">Success</button>
<button class="btn btn-3d btn-info mr-xs mb-sm" type="button">Info</button>
<button class="btn btn-3d btn-warning mr-xs mb-sm" type="button">Warning</button>
<button class="btn btn-3d btn-danger mr-xs mb-sm" type="button">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" class="btn btn-primary">
	Click Here!
</button>

 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 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>