Ajax Loader
HTML 
<div class="container well" style="width: 300px; margin: 20px auto;">
1
<div class="container well" style="width: 300px; margin: 20px auto;">
2
 
3
<!-- Button Tags first -->
4
 
5
<div class="btn-group" style="margin: 9px 0;">
6
  <button class="btn">Left</button>
7
  <button class="btn">Middle</button>
8
  <button class="btn">Right</button>
9
</div>
10
 
11
<div class="btn-group" style="margin: 9px 0;">
12
  <button class="btn btn-primary">Left</button>
13
  <button class="btn btn-primary">Middle</button>
14
  <button class="btn btn-primary">Right</button>
15
</div>
16
 
17
<div class="btn-group" style="margin: 9px 0;">
18
  <button class="btn btn-info">Left</button>
19
  <button class="btn btn-info">Middle</button>
20
  <button class="btn btn-info">Right</button>
21
</div>
22
 
23
<div class="btn-group" style="margin: 9px 0;">
24
  <button class="btn btn-success">Left</button>
25
  <button class="btn btn-success">Middle</button>
26
  <button class="btn btn-success">Right</button>
27
</div>
28
 
29
<!-- Lets use some Anchor Tags Now -->
30
 
31
<div class="btn-group" style="margin: 9px 0;">
32
  <a href="javascript:void(0);" class="btn btn-warning">Left</a>
33
  <a href="javascript:void(0);" class="btn btn-warning">Middle</a>
34
  <a href="javascript:void(0);" class="btn btn-warning">Right</a>
35
</div>
36
 
37
<div class="btn-group" style="margin: 9px 0;">
38
  <a href="javascript:void(0);" class="btn btn-danger">Left</a>
39
  <a href="javascript:void(0);" class="btn btn-danger">Middle</a>
40
  <a href="javascript:void(0);" class="btn btn-danger">Right</a>
41
</div>
42
 
43
<div class="btn-group" style="margin: 9px 0;">
44
  <a href="javascript:void(0);" class="btn btn-inverse">Left</a>
45
  <a href="javascript:void(0);" class="btn btn-inverse">Middle</a>
46
  <a href="javascript:void(0);" class="btn btn-inverse">Right</a>
47
</div>
48
 
49
<!-- Button Toolbar with Groups -->
50
 
51
<div class="btn-toolbar">
52
        <div class="btn-group">
53
          <button class="btn">1</button>
54
          <button class="btn">2</button>
55
          <button class="btn">3</button>
56
          <button class="btn">4</button>
57
        </div>
58
        <div class="btn-group">
59
          <button class="btn btn-success">5</button>
60
          <button class="btn btn-success">6</button>
61
          <button class="btn btn-success">7</button>
62
        </div>
63
        <div class="btn-group">
64
          <button class="btn btn-warning">8</button>
65
        </div>
66
</div>
67
68
</div>
 
CSS 
body {
1
body {
2
  font-family: 'Helvetica Neue', Helvetica;
3
  font-size: 13px;
4
}
5
 
6
/*==== Generic ====*/
7
input, button, select, textarea {
8
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
9
}
10
label, input, button, select, textarea {
11
  font-size: 13px;
12
  font-weight: normal;
13
  line-height: 18px;
14
}
15
button, input[type="button"], input[type="reset"], input[type="submit"] {
16
  cursor: pointer;
17
  -webkit-appearance: button;
18
}
19
button, input {
20
  line-height: normal;
21
}
22
button, input, select, textarea {
23
  margin: 0;
24
  font-size: 100%;
25
  vertical-align: middle;
26
}
27
a {
28
  text-decoration: none;
29
}
30
 
31
.well {
32
  min-height: 20px;
33
  padding: 19px;
34
  margin-bottom: 20px;
35
  background-color: whiteSmoke;
36
  border: 1px solid #EEE;
37
  border: 1px solid rgba(0, 0, 0, 0.05);
38
  -webkit-border-radius: 4px;
39
  -moz-border-radius: 4px;
40
  border-radius: 4px;
41
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
42
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
43
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
44
}
45
 
46
/*==== Buttons ====*/
47
.btn {
48
  display: inline-block;
49
  *display: inline;
50
  padding: 4px 10px 4px;
51
  margin-bottom: 0;
52
  *margin-left: .3em;
53
  font-size: 13px;
54
  line-height: 18px;
55
  *line-height: 20px;
56
  color: #333333;
57
  text-align: center;
58
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
59
  vertical-align: middle;
60
  cursor: pointer;
61
  background-color: #f5f5f5;
62
  *background-color: #e6e6e6;
63
  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
64
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
65
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
66
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
67
  background-image: linear-gradient(top, #ffffff, #e6e6e6);
68
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
69
  background-repeat: repeat-x;
70
  border: 1px solid #cccccc;
71
  *border: 0;
72
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
73
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
74
  border-bottom-color: #b3b3b3;
75
  -webkit-border-radius: 4px;
76
     -moz-border-radius: 4px;
77
          border-radius: 4px;
78
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
79
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
80
  *zoom: 1;
81
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
82
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
83
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
84
}
85
 
86
.btn:hover,
87
.btn:active,
88
.btn.active,
89
.btn.disabled,
90
.btn[disabled] {
91
  background-color: #e6e6e6;
92
  *background-color: #d9d9d9;
93
}
94
 
95
.btn:active,
96
.btn.active {
97
  background-color: #cccccc \9;
98
}
99
 
100
.btn:first-child {
101
  *margin-left: 0;
102
}
103
 
104
.btn:hover {
105
  color: #333333;
106
  text-decoration: none;
107
  background-color: #e6e6e6;
108
  *background-color: #d9d9d9;
109
  /* Buttons in IE7 don't get borders, so darken on hover */
110
 
111
  background-position: 0 -15px;
112
  -webkit-transition: background-position 0.1s linear;
113
     -moz-transition: background-position 0.1s linear;
114
      -ms-transition: background-position 0.1s linear;
115
       -o-transition: background-position 0.1s linear;
116
          transition: background-position 0.1s linear;
117
}
118
 
119
.btn:focus {
120
  outline: thin dotted #333;
121
  outline: 5px auto -webkit-focus-ring-color;
122
  outline-offset: -2px;
123
}
124
 
125
.btn.active,
126
.btn:active {
127
  background-color: #e6e6e6;
128
  background-color: #d9d9d9 \9;
129
  background-image: none;
130
  outline: 0;
131
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
132
     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
133
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
134
}
135
 
136
.btn.disabled,
137
.btn[disabled] {
138
  cursor: default;
139
  background-color: #e6e6e6;
140
  background-image: none;
141
  opacity: 0.65;
142
  filter: alpha(opacity=65);
143
  -webkit-box-shadow: none;
144
     -moz-box-shadow: none;
145
          box-shadow: none;
146
}
147
 
148
.btn-large {
149
  padding: 9px 14px;
150
  font-size: 15px;
151
  line-height: normal;
152
  -webkit-border-radius: 5px;
153
     -moz-border-radius: 5px;
154
          border-radius: 5px;
155
}
156
 
157
.btn-large [class^="icon-"] {
158
  margin-top: 1px;
159
}
160
 
161
.btn-small {
162
  padding: 5px 9px;
163
  font-size: 11px;
164
  line-height: 16px;
165
}
166
 
167
.btn-small [class^="icon-"] {
168
  margin-top: -1px;
169
}
170
 
171
.btn-mini {
172
  padding: 2px 6px;
173
  font-size: 11px;
174
  line-height: 14px;
175
}
176
 
177
.btn-primary,
178
.btn-primary:hover,
179
.btn-warning,
180
.btn-warning:hover,
181
.btn-danger,
182
.btn-danger:hover,
183
.btn-success,
184
.btn-success:hover,
185
.btn-info,
186
.btn-info:hover,
187
.btn-inverse,
188
.btn-inverse:hover {
189
  color: #ffffff;
190
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
191
}
192
 
193
.btn-primary.active,
194
.btn-warning.active,
195
.btn-danger.active,
196
.btn-success.active,
197
.btn-info.active,
198
.btn-inverse.active {
199
  color: rgba(255, 255, 255, 0.75);
200
}
201
 
202
.btn {
203
  border-color: #ccc;
204
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
205
}
206
 
207
.btn-primary {
208
  background-color: #0074cc;
209
  *background-color: #0055cc;
210
  background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
211
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
212
  background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
213
  background-image: -o-linear-gradient(top, #0088cc, #0055cc);
214
  background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
215
  background-image: linear-gradient(top, #0088cc, #0055cc);
216
  background-repeat: repeat-x;
217
  border-color: #0055cc #0055cc #003580;
218
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
219
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
220
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
221
}
222
 
223
.btn-primary:hover,
224
.btn-primary:active,
225
.btn-primary.active,
226
.btn-primary.disabled,
227
.btn-primary[disabled] {
228
  background-color: #0055cc;
229
  *background-color: #004ab3;
230
}
231
 
232
.btn-primary:active,
233
.btn-primary.active {
234
  background-color: #004099 \9;
235
}
236
 
237
.btn-warning {
238
  background-color: #faa732;
239
  *background-color: #f89406;
240
  background-image: -ms-linear-gradient(top, #fbb450, #f89406);
241
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
242
  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
243
  background-image: -o-linear-gradient(top, #fbb450, #f89406);
244
  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
245
  background-image: linear-gradient(top, #fbb450, #f89406);
246
  background-repeat: repeat-x;
247
  border-color: #f89406 #f89406 #ad6704;
248
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
249
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
250
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
251
}
252
 
253
.btn-warning:hover,
254
.btn-warning:active,
255
.btn-warning.active,
256
.btn-warning.disabled,
257
.btn-warning[disabled] {
258
  background-color: #f89406;
259
  *background-color: #df8505;
260
}
261
 
262
.btn-warning:active,
263
.btn-warning.active {
264
  background-color: #c67605 \9;
265
}
266
 
267
.btn-danger {
268
  background-color: #da4f49;
269
  *background-color: #bd362f;
270
  background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
271
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
272
  background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
273
  background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
274
  background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
275
  background-image: linear-gradient(top, #ee5f5b, #bd362f);
276
  background-repeat: repeat-x;
277
  border-color: #bd362f #bd362f #802420;
278
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
279
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
280
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
281
}
282
 
283
.btn-danger:hover,
284
.btn-danger:active,
285
.btn-danger.active,
286
.btn-danger.disabled,
287
.btn-danger[disabled] {
288
  background-color: #bd362f;
289
  *background-color: #a9302a;
290
}
291
 
292
.btn-danger:active,
293
.btn-danger.active {
294
  background-color: #942a25 \9;
295
}
296
 
297
.btn-success {
298
  background-color: #5bb75b;
299
  *background-color: #51a351;
300
  background-image: -ms-linear-gradient(top, #62c462, #51a351);
301
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
302
  background-image: -webkit-linear-gradient(top, #62c462, #51a351);
303
  background-image: -o-linear-gradient(top, #62c462, #51a351);
304
  background-image: -moz-linear-gradient(top, #62c462, #51a351);
305
  background-image: linear-gradient(top, #62c462, #51a351);
306
  background-repeat: repeat-x;
307
  border-color: #51a351 #51a351 #387038;
308
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
309
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
310
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
311
}
312
 
313
.btn-success:hover,
314
.btn-success:active,
315
.btn-success.active,
316
.btn-success.disabled,
317
.btn-success[disabled] {
318
  background-color: #51a351;
319
  *background-color: #499249;
320
}
321
 
322
.btn-success:active,
323
.btn-success.active {
324
  background-color: #408140 \9;
325
}
326
 
327
.btn-info {
328
  background-color: #49afcd;
329
  *background-color: #2f96b4;
330
  background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
331
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
332
  background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
333
  background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
334
  background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
335
  background-image: linear-gradient(top, #5bc0de, #2f96b4);
336
  background-repeat: repeat-x;
337
  border-color: #2f96b4 #2f96b4 #1f6377;
338
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
339
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
340
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
341
}
342
 
343
.btn-info:hover,
344
.btn-info:active,
345
.btn-info.active,
346
.btn-info.disabled,
347
.btn-info[disabled] {
348
  background-color: #2f96b4;
349
  *background-color: #2a85a0;
350
}
351
 
352
.btn-info:active,
353
.btn-info.active {
354
  background-color: #24748c \9;
355
}
356
 
357
.btn-inverse {
358
  background-color: #414141;
359
  *background-color: #222222;
360
  background-image: -ms-linear-gradient(top, #555555, #222222);
361
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222));
362
  background-image: -webkit-linear-gradient(top, #555555, #222222);
363
  background-image: -o-linear-gradient(top, #555555, #222222);
364
  background-image: -moz-linear-gradient(top, #555555, #222222);
365
  background-image: linear-gradient(top, #555555, #222222);
366
  background-repeat: repeat-x;
367
  border-color: #222222 #222222 #000000;
368
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
369
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0);
370
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
371
}
372
 
373
.btn-inverse:hover,
374
.btn-inverse:active,
375
.btn-inverse.active,
376
.btn-inverse.disabled,
377
.btn-inverse[disabled] {
378
  background-color: #222222;
379
  *background-color: #151515;
380
}
381
 
382
.btn-inverse:active,
383
.btn-inverse.active {
384
  background-color: #080808 \9;
385
}
386
 
387
button.btn,
388
input[type="submit"].btn {
389
  *padding-top: 2px;
390
  *padding-bottom: 2px;
391
}
392
 
393
button.btn::-moz-focus-inner,
394
input[type="submit"].btn::-moz-focus-inner {
395
  padding: 0;
396
  border: 0;
397
}
398
 
399
button.btn.btn-large,
400
input[type="submit"].btn.btn-large {
401
  *padding-top: 7px;
402
  *padding-bottom: 7px;
403
}
404
 
405
button.btn.btn-small,
406
input[type="submit"].btn.btn-small {
407
  *padding-top: 3px;
408
  *padding-bottom: 3px;
409
}
410
 
411
button.btn.btn-mini,
412
input[type="submit"].btn.btn-mini {
413
  *padding-top: 1px;
414
  *padding-bottom: 1px;
415
}
416
 
417
.btn-group {
418
  position: relative;
419
  *margin-left: .3em;
420
  *zoom: 1;
421
}
422
 
423
.btn-group:before,
424
.btn-group:after {
425
  display: table;
426
  content: "";
427
}
428
 
429
.btn-group:after {
430
  clear: both;
431
}
432
 
433
.btn-group:first-child {
434
  *margin-left: 0;
435
}
436
 
437
.btn-group + .btn-group {
438
  margin-left: 5px;
439
}
440
 
441
.btn-toolbar {
442
  margin-top: 9px;
443
  margin-bottom: 9px;
444
}
445
 
446
.btn-toolbar .btn-group {
447
  display: inline-block;
448
  *display: inline;
449
  /* IE7 inline-block hack */
450
 
451
  *zoom: 1;
452
}
453
 
454
.btn-group > .btn {
455
  position: relative;
456
  float: left;
457
  margin-left: -1px;
458
  -webkit-border-radius: 0;
459
     -moz-border-radius: 0;
460
          border-radius: 0;
461
}
462
 
463
.btn-group > .btn:first-child {
464
  margin-left: 0;
465
  -webkit-border-bottom-left-radius: 4px;
466
          border-bottom-left-radius: 4px;
467
  -webkit-border-top-left-radius: 4px;
468
          border-top-left-radius: 4px;
469
  -moz-border-radius-bottomleft: 4px;
470
  -moz-border-radius-topleft: 4px;
471
}
472
 
473
.btn-group > .btn:last-child,
474
.btn-group > .dropdown-toggle {
475
  -webkit-border-top-right-radius: 4px;
476
          border-top-right-radius: 4px;
477
  -webkit-border-bottom-right-radius: 4px;
478
          border-bottom-right-radius: 4px;
479
  -moz-border-radius-topright: 4px;
480
  -moz-border-radius-bottomright: 4px;
481
}
482
 
483
.btn-group > .btn.large:first-child {
484
  margin-left: 0;
485
  -webkit-border-bottom-left-radius: 6px;
486
          border-bottom-left-radius: 6px;
487
  -webkit-border-top-left-radius: 6px;
488
          border-top-left-radius: 6px;
489
  -moz-border-radius-bottomleft: 6px;
490
  -moz-border-radius-topleft: 6px;
491
}
492
 
493
.btn-group > .btn.large:last-child,
494
.btn-group > .large.dropdown-toggle {
495
  -webkit-border-top-right-radius: 6px;
496
          border-top-right-radius: 6px;
497
  -webkit-border-bottom-right-radius: 6px;
498
          border-bottom-right-radius: 6px;
499
  -moz-border-radius-topright: 6px;
500
  -moz-border-radius-bottomright: 6px;
501
}
502
 
503
.btn-group > .btn:hover,
504
.btn-group > .btn:focus,
505
.btn-group > .btn:active,
506
.btn-group > .btn.active {
507
  z-index: 2;
508
}
 

Button and Pager Options

CSSDeck G+