Ajax Loader
HTML 
<div class="button3D">Click me</div>
1
<div class="button3D">Click me</div>
 
CSS 
html {
1
html {
2
    background: #deddad; /* Old browsers */
3
    background: -moz-linear-gradient(top, #deddad 0%, #f3f3d8 100%); /* FF3.6+ */
4
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deddad), color-stop(100%,#f3f3d8)); /* Chrome,Safari4+ */
5
    background: -webkit-linear-gradient(top, #deddad 0%,#f3f3d8 100%); /* Chrome10+,Safari5.1+ */
6
    background: -o-linear-gradient(top, #deddad 0%,#f3f3d8 100%); /* Opera11.10+ */
7
    background: -ms-linear-gradient(top, #deddad 0%,#f3f3d8 100%); /* IE10+ */
8
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DEDDAD', endColorstr='#F3F3D8',GradientType=0 ); /* IE6-9 */
9
    background: linear-gradient(top, #deddad 0%,#f3f3d8 100%); /* W3C */
10
    height: 100%;
11
}
12
 
13
body {
14
  font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
15
  font-size: 13px;
16
  height: 100%;
17
}
18
 
19
.button3D {
20
    position: relative;
21
    display: block;
22
    width: 200px;
23
    height: 50px;
24
    top: 50%;
25
    left: 50%;
26
    margin-top: -25px;
27
    margin-left: -100px;
28
    background: #650404;
29
    font-family: sans-serif;
30
    text-align: center;
31
    line-height: 50px;
32
    font-size: 24px;
33
    color: #fff;
34
    text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
35
    border: 1px solid #4e0202;
36
    -webkit-box-shadow: 0 5px 15px -5px #222;
37
    -moz-box-shadow: 0 5px 15px -5px #222;
38
    box-shadow: 0 5px 15px -5px #222;
39
    -webkit-user-select: none;
40
    -moz-user-select: none;
41
    user-select: none;
42
    cursor: pointer;
43
}
44
.button3D:before {
45
    content: "";
46
    position: absolute;
47
    top: -9px;
48
    left: 0px;
49
    width: 178px;
50
    height: 0px;
51
    border: 11px solid transparent;
52
    border-bottom: 8px solid #650404;
53
    border-top: 0;
54
}
55
.button3D:after {
56
    content: "";
57
    color: #c56338;
58
    line-height: 180px;
59
    font-size: 16px;
60
    position: absolute;
61
    top: -8px;
62
    left: 1px;
63
    width: 178px;
64
    height: 0px;
65
    border: 10px solid transparent;
66
    border-bottom: 7px solid #891414;
67
    border-top: 0;
68
}
69
 
70
 
71
.button3D:active {
72
    width: 158px;
73
    height: 41px;
74
    top: 50%;
75
    left: 50%;
76
    margin-top: -33px;
77
    margin-left: -79px;
78
    line-height: 36px;
79
    font-size: 22px;
80
    color: #eee;
81
    text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
82
    border: 1px solid #3c0101;
83
    background: #4e0202;
84
    border-top: 0;
85
    -webkit-box-shadow: 0 0 0 0;
86
    -moz-box-shadow: 0 0 0 0;
87
    box-shadow: 0 0 0 0;
88
}
89
.button3D:active:before {
90
    top: 0;
91
    height: 42px;
92
    width: 158px;
93
    left: -12px;
94
    padding: 0 1px;
95
    border: 11px solid #b3b294;
96
    border-bottom: 8px solid #deddad;
97
    border-top: 0;
98
}
99
.button3D:active:after {
100
    content: "";
101
    top: 0;
102
    height: 50px;
103
    width: 182px;
104
    left: -13px;
105
    border: 0;
106
    -webkit-box-shadow: 0 15px 25px -15px rgba(0,0,0,0.5) inset;
107
    -moz-box-shadow: 0 15px 25px -15px rgba(0,0,0,0.5) inset;
108
    box-shadow: 0 15px 25px -15px rgba(0,0,0,0.5) inset;
109
}
 

Clickable 3D Button

CSSDeck G+