Ajax Loader
HTML 
<a href="#" class="button">
1
<a href="#" class="button">
2
  <span class="shine"></span>
3
  <span class="text">Hover Me</span>
4
</a>
 
CSS 
body{
1
body{
2
  background: #888;
3
}
4
 
5
a.button {
6
  width: 200px;
7
  height: 50px;
8
  background: #333;
9
  display: block;
10
  position: relative;
11
  margin: 50px auto 0;
12
  overflow: hidden;
13
  border: 1px solid #333333;
14
  color: white;
15
  text-decoration: none;
16
17
  -webkit-box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
18
  -moz-box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
19
  box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
20
21
  -webkit-border-radius: 4px;
22
  -moz-border-radius: 4px;
23
  border-radius: 4px;
24
25
26
  -webkit-transition: all 0.2s ease;
27
  -moz-transition: all 0.2s ease;
28
  -ms-transition: all 0.2s ease;
29
  -o-transition: all 0.2s ease;
30
  transition: all 0.2s ease;
31
32
  background-image: -webkit-linear-gradient(bottom, #383838 0%, #444444 49%, #555 50%, #555 100%);
33
  background-image: -moz-linear-gradient(bottom, #383838 0%, #444444 49%, #555 50%, #555 100%);
34
  background-image: -ms-linear-gradient(bottom, #383838 0%, #444444 49%, #555 50%, #555 100%);
35
  background-image: -o-linear-gradient(bottom, #383838 0%, #444444 49%, #555 50%, #555 100%);
36
  background-image: linear-gradient(bottom, #383838 0%, #444444 49%, #555 50%, #555 100%);
37
}
38
 
39
a.button span.text {
40
  position: absolute;
41
  top: 16px;
42
  left: 65px;
43
  font: 15px Arial;
44
}
45
 
46
a.button span.shine {
47
  content: '';
48
  position: absolute;
49
  height: 400px;
50
  width: 20px;
51
  background: white;
52
  top: -80px;
53
  left: -20px;
54
  display: block;
55
  opacity: 0.8;
56
57
  -webkit-box-shadow: 0px 0px 20px 10px white;
58
  -moz-box-shadow: 0px 0px 20px 10px white;
59
  box-shadow: 0px 0px 20px 10px white;
60
61
  -webkit-transform: rotate(-45deg);
62
  -moz-transform: rotate(-45deg);
63
  -ms-transform: rotate(-45deg);
64
  -o-transform: rotate(-45deg);
65
  transform: rotate(-45deg);
66
67
  -webkit-transition: all 0.4s ease;
68
  -moz-transition: all 0.4s ease;
69
  -ms-transition: all 0.4s ease;
70
  -o-transition: all 0.4s ease;
71
  transition: all 0.4s ease;
72
}
73
 
74
a.button:hover {
75
  -webkit-box-shadow: inset 0px 1px 10px 0px rgba(255,255,255,.4), 0px 3px 3px 0px rgba(0,0,0,0.4);
76
  -moz-box-shadow: inset 0px 1px 10px 0px rgba(255,255,255,.4), 0px 3px 3px 0px rgba(0,0,0,0.4);
77
  box-shadow: inset 0px 1px 10px 0px rgba(255,255,255,.4), 0px 3px 3px 0px rgba(0,0,0,0.4);
78
}
79
 
80
a.button:active {
81
  -webkit-box-shadow: inset 0px 1px 15px 0px rgba(0,0,0,.4), inset 0px 1px 1px 1px rgba(0,0,0,.2), 0px 1px 1px 0 rgba(255,255,255,.5);
82
  -moz-box-shadow: inset 0px 1px 15px 0px rgba(0,0,0,.4), inset 0px 1px 1px 1px rgba(0,0,0,.2), 0px 1px 1px 0 rgba(255,255,255,.5);
83
  box-shadow: inset 0px 1px 15px 0px rgba(0,0,0,.4), inset 0px 1px 1px 1px rgba(0,0,0,.2), 0px 1px 1px 0 rgba(255,255,255,.5);
84
}
85
 
86
a.button:hover span.shine {
87
  left: 170px;
88
  top: -300px;
89
}
 

Glossy Button with Shine

CSSDeck G+