css loading button

1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
2<meta name="viewport" content="width=device-width, initial-scale=1">
3<style>
4.buttonload {
5  background-color: #04AA6D; /* Green background */
6  border: none; /* Remove borders */
7  color: white; /* White text */
8  padding: 12px 24px; /* Some padding */
9  font-size: 16px; /* Set a font-size */
10}
11
12.buttonload:hover{
13
14background-color: cyan;
15
16}
17
18/* Add a right margin to each icon */
19.fa {
20  margin-left: -12px;
21  margin-right: 8px;
22}
23</style>
24<button class="buttonload">
25  <i class="fa fa-spinner fa-spin"></i>Loading
26</button>
27
28<button class="buttonload">
29  <i class="fa fa-circle-o-notch fa-spin"></i>Loading
30</button>
31
32<button class="buttonload">
33  <i class="fa fa-refresh fa-spin"></i>Loading
34</button>
35
36