Ajax Loader
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
4
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
5
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
6
<head>
7
  <meta charset="utf-8">
8
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9
  <title>Download Buttons</title>
10
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
11
</head>
12
<body>
13
  <div class="container">
14
    <a href="#" class="button button-green">Download</a>
15
    <a href="#" class="button button-red">Download</a>
16
    <a href="#" class="button button-blue">Download</a>
17
    <a href="#" class="button button-orange">Download</a><br><a href="#" class="button button-pink">Download</a>
18
    <a href="#" class="button button-purple">Download</a>
19
    <a href="#" class="button button-darkblue">Download</a>
20
    <a href="#" class="button button-gray">Download</a>
21
  </div>
22
</body>
23
</html>
24
 
 
CSS 
/*
1
/*
2
 * Copyright (c) 2013 Thibaut Courouble
3
 * http://www.cssflow.com
4
 *
5
 * Licensed under the MIT License:
6
 * http://www.opensource.org/licenses/mit-license.php
7
 *
8
 * View the Sass/SCSS source at:
9
 * http://www.cssflow.com/snippets/download-buttons/demo/scss
10
 *
11
 * Original PSD by Julius Csurgo: http://goo.gl/BkthLw
12
 */
13
 
14
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
15
 
16
body {
17
  font: 13px/20px 'Lucida Grande', Verdana, sans-serif;
18
  color: #404040;
19
  background: white;
20
}
21
 
22
.container {
23
  margin: 30px auto;
24
  width: 580px;
25
  text-align: center;
26
}
27
 
28
.container > .button { margin: 12px; }
29
 
30
.button {
31
  position: relative;
32
  display: inline-block;
33
  vertical-align: top;
34
  height: 36px;
35
  line-height: 35px;
36
  padding: 0 20px;
37
  font-size: 13px;
38
  color: white;
39
  text-align: center;
40
  text-decoration: none;
41
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
42
  background-clip: padding-box;
43
  border: 1px solid;
44
  border-radius: 2px;
45
  cursor: pointer;
46
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
47
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
48
}
49
 
50
.button:before {
51
  content: '';
52
  position: absolute;
53
  top: 0;
54
  bottom: 0;
55
  left: 0;
56
  right: 0;
57
  pointer-events: none;
58
  background-image: -webkit-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
59
  background-image: -moz-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
60
  background-image: -o-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
61
  background-image: radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
62
}
63
 
64
.button:hover:before {
65
  background-image: -webkit-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
66
  background-image: -moz-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
67
  background-image: -o-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
68
  background-image: radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
69
}
70
 
71
.button:active {
72
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
73
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
74
}
75
 
76
.button:active:before {
77
  content: none;
78
}
79
 
80
.button-green {
81
  background: #5ca934;
82
  border-color: #478228 #478228 #3c6f22;
83
  background-image: -webkit-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
84
  background-image: -moz-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
85
  background-image: -o-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
86
  background-image: linear-gradient(to bottom, #69c03b, #5ca934 66%, #54992f);
87
}
88
 
89
.button-green:active {
90
  background: #5ca934;
91
  border-color: #3c6f22 #478228 #478228;
92
}
93
 
94
.button-red {
95
  background: #d5452f;
96
  border-color: #ae3623 #ae3623 #992f1f;
97
  background-image: -webkit-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
98
  background-image: -moz-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
99
  background-image: -o-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
100
  background-image: linear-gradient(to bottom, #da5c48, #d5452f 66%, #c73d28);
101
}
102
 
103
.button-red:active {
104
  background: #d5452f;
105
  border-color: #992f1f #ae3623 #ae3623;
106
}
107
 
108
.button-blue {
109
  background: #1097e6;
110
  border-color: #0d78b6 #0d78b6 #0b689e;
111
  background-image: -webkit-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3);
112
  background-image: -moz-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3);
113
  background-image: -o-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3);
114
  background-image: linear-gradient(to bottom, #25a5f0, #1097e6 66%, #0f8ad3);
115
}
116
 
117
.button-blue:active {
118
  background: #1097e6;
119
  border-color: #0b689e #0d78b6 #0d78b6;
120
}
121
 
122
.button-orange {
123
  background: #f4902a;
124
  border-color: #df770c #df770c #c76a0a;
125
  background-image: -webkit-linear-gradient(top, #f69f47, #f4902a 66%, #f38617);
126
  background-image: -moz-linear-gradient(top, #f69f47, #f4902a 66%, #f38617);
127
  background-image: -o-linear-gradient(top, #f69f47, #f4902a 66%, #f38617);
128
  background-image: linear-gradient(to bottom, #f69f47, #f4902a 66%, #f38617);
129
}
130
 
131
.button-orange:active {
132
  background: #f4902a;
133
  border-color: #c76a0a #df770c #df770c;
134
}
135
 
136
.button-pink {
137
  background: #e8367f;
138
  border-color: #d31865 #d31865 #bc165a;
139
  background-image: -webkit-linear-gradient(top, #eb5190, #e8367f 66%, #e62473);
140
  background-image: -moz-linear-gradient(top, #eb5190, #e8367f 66%, #e62473);
141
  background-image: -o-linear-gradient(top, #eb5190, #e8367f 66%, #e62473);
142
  background-image: linear-gradient(to bottom, #eb5190, #e8367f 66%, #e62473);
143
}
144
 
145
.button-pink:active {
146
  background: #e8367f;
147
  border-color: #bc165a #d31865 #d31865;
148
}
149
 
150
.button-gray {
151
  background: #47494f;
152
  border-color: #2f3034 #2f3034 #232427;
153
  background-image: -webkit-linear-gradient(top, #55585f, #47494f 66%, #3d3f44);
154
  background-image: -moz-linear-gradient(top, #55585f, #47494f 66%, #3d3f44);
155
  background-image: -o-linear-gradient(top, #55585f, #47494f 66%, #3d3f44);
156
  background-image: linear-gradient(to bottom, #55585f, #47494f 66%, #3d3f44);
157
}
158
 
159
.button-gray:active {
160
  background: #47494f;
161
  border-color: #232427 #2f3034 #2f3034;
162
}
163
 
164
.button-darkblue {
165
  background: #3b5ca0;
166
  border-color: #2d477b #2d477b #263c68;
167
  background-image: -webkit-linear-gradient(top, #4369b6, #3b5ca0 66%, #365391);
168
  background-image: -moz-linear-gradient(top, #4369b6, #3b5ca0 66%, #365391);
169
  background-image: -o-linear-gradient(top, #4369b6, #3b5ca0 66%, #365391);
170
  background-image: linear-gradient(to bottom, #4369b6, #3b5ca0 66%, #365391);
171
}
172
 
173
.button-darkblue:active {
174
  background: #3b5ca0;
175
  border-color: #263c68 #2d477b #2d477b;
176
}
177
 
178
.button-purple {
179
  background: #9966cb;
180
  border-color: #8040be #8040be #733aab;
181
  background-image: -webkit-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
182
  background-image: -moz-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
183
  background-image: -o-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
184
  background-image: linear-gradient(to bottom, #a87dd3, #9966cb 66%, #8f57c6);
185
}
186
 
187
.button-purple:active {
188
  background: #9966cb;
189
  border-color: #733aab #8040be #8040be;
190
}
191
 
 

Download Buttons

CSSDeck G+