Ajax Loader
HTML 
<div class="hot-container">
1
<div class="hot-container">
2
  <p>
3
    <a href="#" class="btn">This is a button</a>
4
    <a href="#" class="btn btn-blue">This is a button</a>
5
  </p>
6
  <p>
7
    <a href="#" class="btn btn-red">This is a button</a>
8
    <a href="#" class="btn btn-green">This is a button</a>
9
  </p>
10
</div>
 
CSS 
.hot-container p { margin-top: 10px; }
1
.hot-container p { margin-top: 10px; }
2
a { text-decoration: none; margin: 0 10px; }
3
 
4
.hot-container {
5
  min-height: 100px;
6
  margin-top: 100px;
7
  width: 100%;
8
  text-align: center;
9
}
10
 
11
a.btn {
12
  display: inline-block;
13
  color: #666;
14
  background-color: #eee;
15
  text-transform: uppercase;
16
  letter-spacing: 2px;
17
  font-size: 12px;
18
  padding: 10px 30px;
19
  border-radius: 5px;
20
  -moz-border-radius: 5px;
21
  -webkit-border-radius: 5px;
22
  border: 1px solid rgba(0,0,0,0.3);
23
  border-bottom-width: 3px;
24
}
25
 
26
  a.btn:hover {
27
    background-color: #e3e3e3;
28
    border-color: rgba(0,0,0,0.5);
29
  }
30
31
  a.btn:active {
32
    background-color: #CCC;
33
    border-color: rgba(0,0,0,0.9);
34
  }
35
 
36
/* blue button */
37
 
38
a.btn.btn-blue {
39
  background-color: #699DB6;
40
  border-color: rgba(0,0,0,0.3);
41
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
42
  color: #FFF;
43
}
44
 
45
  a.btn.btn-blue:hover {
46
    background-color: #4F87A2;
47
    border-color: rgba(0,0,0,0.5);
48
  }
49
50
  a.btn.btn-blue:active {
51
    background-color: #3C677B;
52
    border-color: rgba(0,0,0,0.9);
53
  }
54
 
55
/* red button */
56
 
57
a.btn.btn-red {
58
  background-color: #E48681;
59
  border-color: rgba(0,0,0,0.3);
60
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
61
  color: #FFF;
62
}
63
 
64
  a.btn.btn-red:hover {
65
    background-color: #DA4F49;
66
    border-color: rgba(0,0,0,0.5);
67
  }
68
69
  a.btn.btn-red:active {
70
    background-color: #B32C24;
71
    border-color: rgba(0,0,0,0.9);
72
  }
 

Purely CSS

CSSDeck G+