Ajax Loader
HTML 
<a href="#" class="button">This is a Button</a>
1
<a href="#" class="button">This is a Button</a>
 
CSS 
body {
1
body {
2
  font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
3
  font-size: 13px;
4
5
  height: 100%;
6
  background-color: #2574b0;
7
  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%, transparent 75%, transparent);
8
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%, transparent 75%, transparent);
9
  background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%, transparent 75%, transparent);
10
  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%, transparent 75%, transparent);
11
  background-size: 100px 100px;
12
13
  text-align: center;
14
}
15
 
16
a.button {
17
  font-family: 'PT Sans', arial, serif;
18
  color:#ffffff;
19
  text-align:center;
20
  font-size:24px;
21
  font-weight:bold;
22
  padding:10px;
23
24
  text-shadow: /* Simulating Text Stroke */
25
        -1px -1px 0 #000,
26
        1px -1px 0 #000,
27
        -1px 1px 0 #000,
28
        1px 1px 0 #000;
29
30
  border: 1px solid rgba(0,0,0,0.5);
31
  border-bottom: 3px solid rgba(0,0,0,0.5);
32
33
  -webkit-border-radius: 3px;
34
  -moz-border-radius: 3px;
35
  border-radius: 3px;
36
37
  background: rgba(0,0,0,0.25);
38
 
39
    -o-box-shadow:
40
        0 2px 8px rgba(0,0,0,0.5),
41
        inset 0 1px rgba(255,255,255,0.3),
42
        inset 0 10px rgba(255,255,255,0.2),
43
        inset 0 10px 20px rgba(255,255,255,0.25),
44
        inset 0 -15px 30px rgba(0,0,0,0.3);
45
 
46
    -webkit-box-shadow:
47
        0 2px 8px rgba(0,0,0,0.5),
48
        inset 0 1px rgba(255,255,255,0.3),
49
        inset 0 10px rgba(255,255,255,0.2),
50
        inset 0 10px 20px rgba(255,255,255,0.25),
51
        inset 0 -15px 30px rgba(0,0,0,0.3);
52
 
53
    -moz-box-shadow:
54
        0 2px 8px rgba(0,0,0,0.5),
55
        inset 0 1px rgba(255,255,255,0.3),
56
        inset 0 10px rgba(255,255,255,0.2),
57
        inset 0 10px 20px rgba(255,255,255,0.25),
58
        inset 0 -15px 30px rgba(0,0,0,0.3);
59
60
  box-shadow:
61
        0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
62
        inset 0 1px rgba(255,255,255,0.3), /* Top light Line */
63
        inset 0 10px rgba(255,255,255,0.2), /* Top Light Shadow */
64
        inset 0 10px 20px rgba(255,255,255,0.25), /* Sides Light Shadow */
65
        inset 0 -15px 30px rgba(0,0,0,0.3); /* Dark Background */
66
 
67
  margin: 40px;
68
  display: inline-block;
69
  text-decoration: none;
70
}
 

CSS3 Glass Button

CSSDeck G+