Ajax Loader
HTML 
<div id="container">
1
<div id="container">
2
  <div id="button1">
3
    <input type="checkbox" id="check"></input><label id="label" for="check"><span class="opacity">CLICK TO LIKE</span><span class="thanks">THANKS</span></label>
4
    <div class="light3"></div>
5
    <div id="arrow">
6
      <p class="arrow-before"></p>
7
      <p class="arrow-after"></p>
8
      <div class="light"></div>
9
    </div>
10
    <div id="hover">
11
    <div id="img">
12
    <p class="img-before"></p>
13
    <p class="img-after"></p>
14
      <span> +1 </span>
15
      <div class="light2"></div>
16
    </div>
17
    </div>
18
  </div>
 
CSS 
*{
1
*{
2
margin: 0;
3
padding: 0
4
}
5
 
6
#container {
7
width: 150px;
8
margin: 0 auto;
9
position: relative;
10
}
11
 
12
#button1{
13
width: 150px;
14
height: 30px;
15
}
16
 
17
input[type=checkbox]{
18
visibility: hidden;
19
position: absolute;
20
}
21
 
22
label{
23
display: block;
24
width: 150px;
25
height: 30px;
26
margin: 20px auto;
27
background-color: red;
28
text-align: center;
29
border-radius: 0 4px 4px 0;
30
position: relative;
31
background-image: -webkit-linear-gradient(#991010, #830808);
32
background-image: -moz-linear-gradient(#991010, #830808);
33
background-image: -o-linear-gradient(#991010, #830808);
34
background-image: -ms-linear-gradient(#991010, #830808);
35
background-image: linear-gradient(#991010, #830808);
36
box-shadow: 0 1px 2px #727272;
37
cursor: pointer;
38
}
39
 
40
.light, .light2, .light3{
41
top:1px;
42
height: 1px;
43
position: absolute;
44
width: 100%;
45
background-color:black;
46
background: -webkit-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
47
  background: -moz-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
48
  background: -ms-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
49
  background: -o-linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
50
  background: linear-gradient(left top, rgba(255,255,255,0.0), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
51
}
52
 
53
.light3{
54
width: 150px;
55
left: -2px;
56
}
57
 
58
span{
59
line-height: 30px;
60
color: white;
61
font-size: 12px;
62
font-family: Verdana;
63
font-weight: bold;
64
}
65
 
66
.thanks{
67
position: absolute;
68
top: 0;
69
left: 151px;
70
visibility:hidden;
71
transition: all 0.5s ease-in-out;
72
-moz-transition: all 0.5s ease-in-out;
73
-webkit-transition: all 0.5s ease-in-out;
74
-o-transition: all 0.5s ease-in-out;
75
-ms-transition: all 0.5s ease-in-out;
76
}
77
 
78
#arrow{
79
background: black;
80
top: 0px;
81
left: -31px;
82
width: 30px;
83
position: absolute;
84
height: 30px;
85
border-radius: 4px 0 0 4px;
86
cursor: pointer;
87
background-image: -webkit-linear-gradient(#3d3d3d, #202020);
88
background-image: -moz-linear-gradient(#3d3d3d, #202020);
89
background-image: -o-linear-gradient(#3d3d3d, #202020);
90
background-image: -ms-linear-gradient(#3d3d3d, #202020);
91
background-image: linear-gradient(#3d3d3d, #202020);
92
box-shadow: 0 1px 2px #727272;
93
transition: all .4s  ease-in-out;
94
-moz-transition: all .4s ease-in-out;
95
-webkit-transition: all .4s  ease-in-out;
96
-o-transition: all .4s  ease-in-out;
97
-ms-transition: all .4s  ease-in-out;
98
}
99
 
100
#arrow .arrow-after{
101
content: "";
102
position: absolute;
103
top: 5px;
104
left: 13px;
105
width: 8px;
106
height: 10px;
107
background-color: white;
108
-moz-transform: rotate(-90deg);
109
-webkit-transform: rotate(-90deg);
110
-o-transform: rotate(-90deg);
111
-ms-transform: rotate(-90deg);
112
transition: all .4s ease-in-out;
113
-moz-transition: all .4s  ease-in-out;
114
-webkit-transition: all .4s  ease-in-out;
115
-o-transition: all .4s  ease-in-out;
116
-ms-transition: all .4s  ease-in-out;
117
-moz-transform-origin: bottom;
118
-webkit-transform-origin: bottom;
119
-o-transform-origin: bottom;
120
-ms-transform-origin: bottom;
121
}
122
 
123
#arrow .arrow-before{
124
content:"";
125
position: absolute;
126
top: 15px;
127
left: 10px;
128
border-left: 7px solid transparent;
129
border-right: 7px solid transparent;
130
border-top: 8px solid white;
131
-moz-transform: rotate(-90deg);
132
-webkit-transform: rotate(-90deg);
133
-o-transform: rotate(-90deg);
134
-ms-transform: rotate(-90deg);
135
transition: all .4s  ease-in-out;
136
-moz-transition: all .4s ease-in-out;
137
-webkit-transition: all .4s  ease-in-out;
138
-o-transition: all .4s  ease-in-out;
139
-ms-transition: all .4s  ease-in-out;
140
-moz-transform-origin: top;
141
-webkit-transform-origin: top;
142
-o-transform-origin: top;
143
-ms-transform-origin: top;
144
}
145
 
146
#button1:hover #arrow .arrow-before, #button1:hover #arrow  .arrow-after, input[type=checkbox]:checked~#arrow .arrow-before, input[type=checkbox]:checked~#arrow  .arrow-after{
147
-moz-transform: rotate(0deg);
148
-webkit-transform: rotate(0deg);
149
-o-transform: rotate(0deg);
150
-ms-transform: rotate(0deg);
151
left: 11px;
152
top:6px
153
}
154
 
155
#button1:hover #arrow .arrow-before, input[type=checkbox]:checked~#arrow .arrow-before{
156
left: 8px;
157
top: 16px;
158
}
159
 
160
#hover{
161
width: 70px;
162
height:0;
163
position: absolute;
164
top:30px;
165
left: 42px;
166
z-index: -1;
167
background-image: -moz-linear-gradient(#202020, #3d3d3d);
168
background-image: -webkit-linear-gradient(#202020, #3d3d3d);
169
background-image: -o-linear-gradient(#202020, #3d3d3d);
170
background-image: -ms-linear-gradient(#202020, #3d3d3d);
171
background-image: linear-gradient(#202020, #3d3d3d);
172
box-shadow: inset 0 1px 1px #1c1c1c, 0 1px 1px #6f6f6f;
173
border-radius: 0 0px 4px 4px;
174
transition: height 0.5s ease-in-out;
175
-moz-transition: height 0.5s ease-in-out;
176
-webkit-transition: height 0.5s ease-in-out;
177
-o-transition: height 0.5s ease-in-out;
178
-ms-transition: height 0.5s ease-in-out;
179
}
180
 
181
.light2{
182
top:19px;
183
width: 45px;
184
}
185
 
186
.opacity{
187
position: absolute;
188
left: 25px;
189
transition: all 0.5s ease-in-out;
190
-moz-transition: all 0.5s ease-in-out;
191
-webkit-transition: all 0.5s ease-in-out;
192
-o-transition: all 0.5s ease-in-out;
193
-ms-transition: all 0.5s ease-in-out;
194
}
195
 
196
#hover span{
197
position: absolute;
198
top: -8px;
199
left: 20px;
200
color: white;
201
}
202
 
203
#img .img-before{
204
border-radius: 20px;
205
content:"";
206
height: 5px;
207
position: absolute;
208
left: 5px;
209
top: 6px;
210
width: 2px;
211
background:black;
212
-webkit-transform: rotate(-45deg);
213
-moz-transform: rotate(-45deg);
214
-ms-transform: rotate(-45deg);
215
-o-transform: rotate(-45deg);
216
transform: rotate(-45deg);
217
}
218
 
219
#img .img-after{
220
border-radius: 20px;
221
content:"";
222
height: 7px;
223
left: 8px;
224
top:4px;
225
width: 2px;
226
position: absolute;
227
background-color: black;
228
-webkit-transform: rotate(45deg);
229
-moz-transform: rotate(45deg);
230
-ms-transform: rotate(45deg);
231
-o-transform: rotate(45deg);
232
transform: rotate(45deg);
233
}
234
 
235
#img{
236
 border-radius: 100%;
237
height: 15px;
238
width: 15px;
239
position: absolute;
240
top: -20px;
241
left: 12px;
242
background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, #c7c7c7, #fff 90%);
243
background-image:    -moz-radial-gradient(50% 50%, ellipse closest-side, #c7c7c7, #fff 90%);
244
background-image:     -ms-radial-gradient(50% 50%, ellipse closest-side, #c7c7c7, #fff 90%);
245
background-image:      -o-radial-gradient(50% 50%, ellipse closest-side, #c7c7c7, #fff 90%);
246
background-image:         radial-gradient(50% 50%, ellipse closest-side, #c7c7c7, #fff 90%);
247
box-shadow: inset 0 1px 2px #575757;
248
transition: all 0.5s ease-in-out;
249
-moz-transition: all 0.5s ease-in-out;
250
-webkit-transition: all 0.5s ease-in-out;
251
-o-transition: all 0.5s ease-in-out;
252
-ms-transition: all 0.5s ease-in-out;
253
}
254
 
255
input[type=checkbox]:checked~#hover{
256
height:25px;
257
}
258
 
259
input[type=checkbox]:checked~#hover #img {
260
top: 5px;
261
}
262
 
263
input[type=checkbox]:checked~#label .opacity{
264
left: -100px;
265
visibility:hidden;
266
}
267
 
268
input[type=checkbox]:checked~#label .thanks{
269
visibility: visible;
270
left: 48px;
271
}
 

CSS3 Click to Like Animated Button

CSSDeck G+