Ajax Loader
HTML 
<div id="container_button">
1
<div id="container_button">
2
  <div id="hole">
3
    <div id="button">
4
      <div id="triangle"></div>
5
      <div id="lighter_triangle"></div>
6
      <div id="darker_triangle"></div>
7
    </div>
8
  </div>
9
</div>
 
CSS 
#container_button {
1
#container_button {
2
    background-color: #252525;
3
    width: 400px;
4
    height: 400px;
5
    margin-left: auto;
6
    margin-right: auto;
7
    margin-bottom: 0px;
8
    margin-top: 0px;
9
    -webkit-border-radius: 200px;
10
    -moz-border-radius: 200px;
11
    border-radius: 200px;
12
    -webkit-box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
13
    -moz-box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
14
    box-shadow: inset 0px 2px 0px #585858, 1px 1px 0px #000, 2px 2px 5px #000;
15
}
16
#hole {
17
    background-color: #151515;
18
    width: 310px;
19
    height: 310px;
20
    margin-left: auto;
21
    margin-right: auto;
22
    top: 50px;
23
    position: relative;
24
    -webkit-border-radius: 155px;
25
    -moz-border-radius: 155px;
26
    border-radius: 155px;
27
    -webkit-box-shadow: 1px 1px 0px #5d5d5d;
28
    -moz-box-shadow: 1px 1px 0px #5d5d5d;
29
    box-shadow: 1px 1px 0px #5d5d5d;
30
}
31
#button {
32
    width: 300px;
33
    height: 300px;
34
    margin-left: auto;
35
    margin-right: auto;
36
    overflow: auto;
37
    cursor: pointer;
38
    top: -5px;
39
    position: relative;
40
    background-image: linear-gradient(bottom, rgb(82,79,82) 0%, rgb(134,134,134) 57%);
41
    background-image: -o-linear-gradient(bottom, rgb(82,79,82) 0%, rgb(134,134,134) 57%);
42
    background-image: -moz-linear-gradient(bottom, rgb(82,79,82) 0%, rgb(134,134,134) 57%);
43
    background-image: -webkit-linear-gradient(bottom, rgb(82,79,82) 0%, rgb(134,134,134) 57%);
44
    background-image: -ms-linear-gradient(bottom, rgb(82,79,82) 0%, rgb(134,134,134) 57%);
45
    -webkit-border-radius: 150px;
46
    -moz-border-radius: 150px;
47
    border-radius: 150px;
48
    -webkit-box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;
49
    -moz-box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;
50
    box-shadow: inset 0px 2px 0px #a8a8a8, 0px 2px 0px #2a2a2a, 0px 3px 0px #2a2a2a, 0px 4px 0px #2a2a2a, 0px 5px 0px #2a2a2a, 0px 6px 0px #2a2a2a, 0px 7px 0px #2a2a2a, 0px 8px 0px #2a2a2a, 0px 9px 0px #2a2a2a, 0px 10px 0px #2a2a2a, 10px 20px 10px #000;
51
    -webkit-transition: all .2s;
52
    -moz-transition: all .2s;
53
    transition: all .2s;
54
}
55
#button:active {
56
    top: 5px;
57
    -webkit-box-shadow: none;
58
    -moz-box-shadow: none;
59
    box-shadow: inset 0px 2px 0px #a8a8a8;
60
}
61
#triangle {
62
    width: 0px;
63
    height: 0px;
64
    margin-left: 50%;
65
    margin-top: 50%;
66
    left: -27px;
67
    top: -50px;
68
    position: relative;
69
    border-top: 50px solid transparent;
70
    border-bottom: 50px solid transparent;
71
    border-left: 80px solid #22a9db;
72
    z-index: 2;
73
    -webkit-transition: all .3s;
74
    -moz-transition: all .3s;
75
    transition: all .3s;
76
}
77
#button:hover #triangle { border-left: 80px solid #45bde9 }
78
#button:active #triangle { border-left: 80px solid #e94545 }
79
#lighter_triangle {
80
    width: 0px;
81
    height: 0px;
82
    margin-left: 50%;
83
    margin-top: 50%;
84
    left: -27px;
85
    top: -48px;
86
    position: absolute;
87
    border-top: 50px solid transparent;
88
    border-bottom: 50px solid transparent;
89
    border-left: 80px solid #43c0ee;
90
    z-index: 1;
91
    -webkit-transition: all .3s;
92
    -moz-transition: all .3s;
93
    transition: all .3s;
94
}
95
#button:hover #lighter_triangle { border-left: 80px solid #8bdaf7 }
96
#button:active #lighter_triangle { border-left: 80px solid #f78b8b }
97
#darker_triangle {
98
    width: 0px;
99
    height: 0px;
100
    margin-left: 50%;
101
    margin-top: 50%;
102
    left: -28px;
103
    top: -53px;
104
    position: absolute;
105
    border-top: 50px solid transparent;
106
    border-bottom: 50px solid transparent;
107
    border-left: 80px solid #0a7da7;
108
    z-index: 1;
109
    -webkit-transition: all .3s;
110
    -moz-transition: all .3s;
111
    transition: all .3s;
112
}
113
#button:hover #darker_triangle { border-left: 80px solid #1d98c5 }
114
#button:active #darker_triangle { border-left: 80px solid #c51d1d }
 

Amazing Play Button in CSS3

CSSDeck G+