Ajax Loader
HTML 
<button class="depth" type="button">&#10004;</button>
1
<button class="depth" type="button">&#10004;</button>
 
CSS 
html {
1
html {
2
    -webkit-tap-highlight-color: hsla(0,0,0,0);
3
    tap-highlight-color: hsla(0,0,0,0);
4
}
5
 
6
body {
7
    background-color: #363636;
8
    background-image: -webkit-linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25)), -webkit-linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25));
9
    background-image: -moz-linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25)), -moz-linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25));
10
    background-image: -ms-linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25)), -ms-linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25));
11
    background-image: -o-linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25)), -o-linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25));
12
    background-image: linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25)), linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25));
13
    background-position: 0 0, 2px 2px;
14
    background-size: 4px 4px;
15
    padding: 100px;
16
}
17
 
18
button {
19
    left: 50%;
20
    margin: -40px;
21
    position: absolute;
22
    top: 50%;
23
}
24
 
25
button:hover, button:active { outline: 0 }
26
 
27
/* 3D Button
28
   ================================================== */
29
 
30
button.depth {
31
    background: #444;
32
    border: none;
33
    border-radius: 80px;
34
    box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2), inset 0 0 2px 4px hsla(0,0%,0%,.2), inset 0 0 2px 6px hsla(0,0%,0%,.2), inset 0 0 1px 8px hsla(0,0%,0%,.5), inset 0 -4px 2px 4px hsla(0,0%,0%,.5), inset 0 1px 1px 8px hsla(0,0%,100%,.25), inset 0 -30px 30px hsla(0,0%,0%,.2), 0 -4px 8px 4px hsla(0,0%,0%,.5), 0 10px 10px hsla(0,0%,0%,.25), 0 0 2px 2px hsla(0,0%,0%,.2), 0 0 2px 4px hsla(0,0%,0%,.2), 0 0 2px 6px hsla(0,0%,0%,.2), 0 0 2px 8px hsla(0,0%,0%,.5), 0 1px 2px 8px hsla(0,0%,100%,.25), 0 -1px 2px 8px hsla(0,0%,0%,.5);
35
    color: #303030;
36
    cursor: pointer;
37
    font: bold 40px/85px sans-serif;
38
    height: 80px;
39
    padding: 0;
40
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25), 0 -1px 1px hsla(0,0%,0%,.75);
41
    width: 80px;
42
}
43
 
44
button.depth:hover, button.depth:focus {
45
    color: #0ab;
46
    text-shadow: 0 0 20px hsla(240,75%,75%,.5), 0 1px 1px hsla(0,0%,100%,.25), 0 -1px 1px hsla(0,0%,0%,.75);
47
}
48
 
49
button.depth:active {
50
    box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2), inset 0 0 2px 4px hsla(0,0%,0%,.2), inset 0 0 2px 6px hsla(0,0%,0%,.2), inset 0 0 1px 7px hsla(0,0%,0%,.5), inset 0 5px 15px 7px hsla(0,0%,0%,.15), inset 0 -4px 2px 3px hsla(0,0%,0%,.5), inset 0 1px 1px 7px hsla(0,0%,100%,.25), inset 0 -30px 30px hsla(0,0%,0%,.1), inset 0 30px 30px hsla(0,0%,0%,.2), 0 -4px 8px 4px hsla(0,0%,0%,.5), 0 5px 10px hsla(0,0%,0%,.25), 0 0 2px 2px hsla(0,0%,0%,.2), 0 0 2px 4px hsla(0,0%,0%,.2), 0 0 2px 6px hsla(0,0%,0%,.2), 0 0 2px 8px hsla(0,0%,0%,.5), 0 1px 2px 8px hsla(0,0%,100%,.25), 0 -1px 2px 8px hsla(0,0%,0%,.5);
51
    line-height: 86px;
52
}
 

Amazing Push Button

CSSDeck G+