Ajax Loader
HTML 
<h1>CSS3 Checkbox Styles</h1>
1
<h1>CSS3 Checkbox Styles</h1>
2
 
3
<!-- Slide ONE -->
4
<div class="slideOne">
5
  <input type="checkbox" value="None" id="slideOne" name="check" />
6
  <label for="slideOne"></label>
7
</div>
8
 
9
<!-- Slide TWO -->
10
<div class="slideTwo">
11
  <input type="checkbox" value="None" id="slideTwo" name="check" />
12
  <label for="slideTwo"></label>
13
</div>
14
 
15
<!-- Slide THREE -->
16
<div class="slideThree">
17
  <input type="checkbox" value="None" id="slideThree" name="check" />
18
  <label for="slideThree"></label>
19
</div>
20
 
21
<!-- Rounded ONE -->
22
<div class="roundedOne">
23
  <input type="checkbox" value="None" id="roundedOne" name="check" />
24
  <label for="roundedOne"></label>
25
</div>
26
 
27
<!-- Rounded TWO -->
28
<div class="roundedTwo">
29
  <input type="checkbox" value="None" id="roundedTwo" name="check" />
30
  <label for="roundedTwo"></label>
31
</div>
32
 
33
<!-- Squared ONE -->
34
<div class="squaredOne">
35
  <input type="checkbox" value="None" id="squaredOne" name="check" />
36
  <label for="squaredOne"></label>
37
</div>
38
 
39
<!-- Squared TWO -->
40
<div class="squaredTwo">
41
  <input type="checkbox" value="None" id="squaredTwo" name="check" />
42
  <label for="squaredTwo"></label>
43
</div>
44
 
45
<!-- Squared THREE -->
46
<div class="squaredThree">
47
  <input type="checkbox" value="None" id="squaredThree" name="check" />
48
  <label for="squaredThree"></label>
49
</div>
50
 
51
<!-- Squared FOUR -->
52
<div class="squaredFour">
53
  <input type="checkbox" value="None" id="squaredFour" name="check" />
54
  <label for="squaredFour"></label>
55
</div>
56
 
 
CSS 
body {
1
body {
2
  background: #555;
3
}
4
 
5
h1 {
6
  color: #eee;
7
  font: 30px Arial, sans-serif;
8
  -webkit-font-smoothing: antialiased;
9
  text-shadow: 0px 1px black;
10
  text-align: center;
11
  margin-bottom: 50px;
12
}
13
 
14
input[type=checkbox] {
15
  visibility: hidden;
16
}
17
 
18
/* SLIDE ONE */
19
.slideOne {
20
  width: 50px;
21
  height: 10px;
22
  background: #333;
23
  margin: 20px auto;
24
 
25
  -webkit-border-radius: 50px;
26
  -moz-border-radius: 50px;
27
  border-radius: 50px;
28
  position: relative;
29
 
30
  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
31
  -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
32
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
33
}
34
 
35
.slideOne label {
36
  display: block;
37
  width: 16px;
38
  height: 16px;
39
 
40
  -webkit-border-radius: 50px;
41
  -moz-border-radius: 50px;
42
  border-radius: 50px;
43
 
44
  -webkit-transition: all .4s ease;
45
  -moz-transition: all .4s ease;
46
  -o-transition: all .4s ease;
47
  -ms-transition: all .4s ease;
48
  transition: all .4s ease;
49
  cursor: pointer;
50
  position: absolute;
51
  top: -3px;
52
  left: -3px;
53
 
54
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
55
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
56
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
57
  background: #fcfff4;
58
 
59
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
60
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
61
  background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
62
  background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
63
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
64
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
65
}
66
 
67
.slideOne input[type=checkbox]:checked + label {
68
  left: 37px;
69
}
70
 
71
/* SLIDE TWO */
72
.slideTwo {
73
  width: 80px;
74
  height: 30px;
75
  background: #333;
76
  margin: 20px auto;
77
 
78
  -webkit-border-radius: 50px;
79
  -moz-border-radius: 50px;
80
  border-radius: 50px;
81
  position: relative;
82
 
83
  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
84
  -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
85
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
86
}
87
 
88
.slideTwo:after {
89
  content: '';
90
  position: absolute;
91
  top: 14px;
92
  left: 14px;
93
  height: 2px;
94
  width: 52px;
95
 
96
  -webkit-border-radius: 50px;
97
  -moz-border-radius: 50px;
98
  border-radius: 50px;
99
  background: #111;
100
 
101
  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
102
  -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
103
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
104
}
105
 
106
.slideTwo label {
107
  display: block;
108
  width: 22px;
109
  height: 22px;
110
 
111
  -webkit-border-radius: 50px;
112
  -moz-border-radius: 50px;
113
  border-radius: 50px;
114
 
115
  -webkit-transition: all .4s ease;
116
  -moz-transition: all .4s ease;
117
  -o-transition: all .4s ease;
118
  -ms-transition: all .4s ease;
119
  transition: all .4s ease;
120
  cursor: pointer;
121
  position: absolute;
122
  top: 4px;
123
  z-index: 1;
124
  left: 4px;
125
 
126
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
127
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
128
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
129
  background: #fcfff4;
130
 
131
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
132
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
133
  background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
134
  background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
135
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
136
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
137
}
138
 
139
.slideTwo label:after {
140
  content: '';
141
  position: absolute;
142
  width: 10px;
143
  height: 10px;
144
 
145
  -webkit-border-radius: 50px;
146
  -moz-border-radius: 50px;
147
  border-radius: 50px;
148
  background: #333;
149
  left: 6px;
150
  top: 6px;
151
 
152
  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
153
  -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
154
  box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);
155
}
156
 
157
.slideTwo input[type=checkbox]:checked + label {
158
  left: 54px;
159
}
160
 
161
.slideTwo input[type=checkbox]:checked + label:after {
162
  background: #00bf00;
163
}
164
 
165
/* SLIDE THREE */
166
.slideThree {
167
  width: 80px;
168
  height: 26px;
169
  background: #333;
170
  margin: 20px auto;
171
 
172
  -webkit-border-radius: 50px;
173
  -moz-border-radius: 50px;
174
  border-radius: 50px;
175
  position: relative;
176
 
177
  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
178
  -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
179
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
180
}
181
 
182
.slideThree:after {
183
  content: 'OFF';
184
  font: 12px/26px Arial, sans-serif;
185
  color: #000;
186
  position: absolute;
187
  right: 10px;
188
  z-index: 0;
189
  font-weight: bold;
190
  text-shadow: 1px 1px 0px rgba(255,255,255,.15);
191
}
192
 
193
.slideThree:before {
194
  content: 'ON';
195
  font: 12px/26px Arial, sans-serif;
196
  color: #00bf00;
197
  position: absolute;
198
  left: 10px;
199
  z-index: 0;
200
  font-weight: bold;
201
}
202
 
203
.slideThree label {
204
  display: block;
205
  width: 34px;
206
  height: 20px;
207
 
208
  -webkit-border-radius: 50px;
209
  -moz-border-radius: 50px;
210
  border-radius: 50px;
211
 
212
  -webkit-transition: all .4s ease;
213
  -moz-transition: all .4s ease;
214
  -o-transition: all .4s ease;
215
  -ms-transition: all .4s ease;
216
  transition: all .4s ease;
217
  cursor: pointer;
218
  position: absolute;
219
  top: 3px;
220
  left: 3px;
221
  z-index: 1;
222
 
223
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
224
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
225
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
226
  background: #fcfff4;
227
 
228
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
229
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
230
  background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
231
  background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
232
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
233
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
234
}
235
 
236
.slideThree input[type=checkbox]:checked + label {
237
  left: 43px;
238
}
239
 
240
/* ROUNDED ONE */
241
.roundedOne {
242
  width: 28px;
243
  height: 28px;
244
  background: #fcfff4;
245
 
246
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
247
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
248
  background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
249
  background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
250
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
251
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
252
  margin: 20px auto;
253
 
254
  -webkit-border-radius: 50px;
255
  -moz-border-radius: 50px;
256
  border-radius: 50px;
257
 
258
  -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
259
  -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
260
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
261
  position: relative;
262
}
263
 
264
.roundedOne label {
265
  cursor: pointer;
266
  position: absolute;
267
  width: 20px;
268
  height: 20px;
269
 
270
  -webkit-border-radius: 50px;
271
  -moz-border-radius: 50px;
272
  border-radius: 50px;
273
  left: 4px;
274
  top: 4px;
275
 
276
  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
277
  -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
278
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
279
 
280
  background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
281
  background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
282
  background: -o-linear-gradient(top, #222 0%, #45484d 100%);
283
  background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
284
  background: linear-gradient(top, #222 0%, #45484d 100%);
285
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
286
}
287
 
288
.roundedOne label:after {
289
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
290
  filter: alpha(opacity=0);
291
  opacity: 0;
292
  content: '';
293
  position: absolute;
294
  width: 16px;
295
  height: 16px;
296
  background: #00bf00;
297
 
298
  background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
299
  background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
300
  background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
301
  background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
302
  background: linear-gradient(top, #00bf00 0%, #009400 100%);
303
 
304
  -webkit-border-radius: 50px;
305
  -moz-border-radius: 50px;
306
  border-radius: 50px;
307
  top: 2px;
308
  left: 2px;
309
 
310
  -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
311
  -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
312
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
313
}
314
 
315
.roundedOne label:hover::after {
316
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
317
  filter: alpha(opacity=30);
318
  opacity: 0.3;
319
}
320
 
321
.roundedOne input[type=checkbox]:checked + label:after {
322
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
323
  filter: alpha(opacity=100);
324
  opacity: 1;
325
}
326
 
327
/* ROUNDED TWO */
328
.roundedTwo {
329
  width: 28px;
330
  height: 28px;
331
  background: #fcfff4;
332
 
333
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
334
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
335
  background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
336
  background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
337
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
338
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
339
  margin: 20px auto;
340
 
341
  -webkit-border-radius: 50px;
342
  -moz-border-radius: 50px;
343
  border-radius: 50px;
344
 
345
  -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
346
  -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
347
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
348
  position: relative;
349
}
350
 
351
.roundedTwo label {
352
  cursor: pointer;
353
  position: absolute;
354
  width: 20px;
355
  height: 20px;
356
 
357
  -webkit-border-radius: 50px;
358
  -moz-border-radius: 50px;
359
  border-radius: 50px;
360
  left: 4px;
361
  top: 4px;
362
 
363
  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
364
  -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
365
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
366
 
367
  background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
368
  background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
369
  background: -o-linear-gradient(top, #222 0%, #45484d 100%);
370
  background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
371
  background: linear-gradient(top, #222 0%, #45484d 100%);
372
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
373
}
374
 
375
.roundedTwo label:after {
376
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
377
  filter: alpha(opacity=0);
378
  opacity: 0;
379
  content: '';
380
  position: absolute;
381
  width: 9px;
382
  height: 5px;
383
  background: transparent;
384
  top: 5px;
385
  left: 4px;
386
  border: 3px solid #fcfff4;
387
  border-top: none;
388
  border-right: none;
389
 
390
  -webkit-transform: rotate(-45deg);
391
  -moz-transform: rotate(-45deg);
392
  -o-transform: rotate(-45deg);
393
  -ms-transform: rotate(-45deg);
394
  transform: rotate(-45deg);
395
}
396
 
397
.roundedTwo label:hover::after {
398
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
399
  filter: alpha(opacity=30);
400
  opacity: 0.3;
401
}
402
 
403
.roundedTwo input[type=checkbox]:checked + label:after {
404
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
405
  filter: alpha(opacity=100);
406
  opacity: 1;
407
}
408
 
409
/* SQUARED ONE */
410
.squaredOne {
411
  width: 28px;
412
  height: 28px;
413
  background: #fcfff4;
414
 
415
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
416
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
417
  background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
418
  background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
419
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
420
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
421
  margin: 20px auto;
422
  -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
423
  -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
424
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
425
  position: relative;
426
}
427
 
428
.squaredOne label {
429
  cursor: pointer;
430
  position: absolute;
431
  width: 20px;
432
  height: 20px;
433
  left: 4px;
434
  top: 4px;
435
 
436
  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
437
  -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
438
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
439
 
440
  background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
441
  background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
442
  background: -o-linear-gradient(top, #222 0%, #45484d 100%);
443
  background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
444
  background: linear-gradient(top, #222 0%, #45484d 100%);
445
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
446
}
447
 
448
.squaredOne label:after {
449
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
450
  filter: alpha(opacity=0);
451
  opacity: 0;
452
  content: '';
453
  position: absolute;
454
  width: 16px;
455
  height: 16px;
456
  background: #00bf00;
457
 
458
  background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
459
  background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
460
  background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
461
  background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
462
  background: linear-gradient(top, #00bf00 0%, #009400 100%);
463
 
464
  top: 2px;
465
  left: 2px;
466
 
467
  -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
468
  -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
469
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
470
}
471
 
472
.squaredOne label:hover::after {
473
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
474
  filter: alpha(opacity=30);
475
  opacity: 0.3;
476
}
477
 
478
.squaredOne input[type=checkbox]:checked + label:after {
479
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
480
  filter: alpha(opacity=100);
481
  opacity: 1;
482
}
483
 
484
/* SQUARED TWO */
485
.squaredTwo {
486
  width: 28px;
487
  height: 28px;
488
  background: #fcfff4;
489
 
490
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
491
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
492
  background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
493
  background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
494
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
495
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
496
  margin: 20px auto;
497
 
498
  -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
499
  -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
500
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
501
  position: relative;
502
}
503
 
504
.squaredTwo label {
505
  cursor: pointer;
506
  position: absolute;
507
  width: 20px;
508
  height: 20px;
509
  left: 4px;
510
  top: 4px;
511
 
512
  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
513
  -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
514
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
515
 
516
  background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
517
  background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
518
  background: -o-linear-gradient(top, #222 0%, #45484d 100%);
519
  background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
520
  background: linear-gradient(top, #222 0%, #45484d 100%);
521
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
522
}
523
 
524
.squaredTwo label:after {
525
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
526
  filter: alpha(opacity=0);
527
  opacity: 0;
528
  content: '';
529
  position: absolute;
530
  width: 9px;
531
  height: 5px;
532
  background: transparent;
533
  top: 4px;
534
  left: 4px;
535
  border: 3px solid #fcfff4;
536
  border-top: none;
537
  border-right: none;
538
 
539
  -webkit-transform: rotate(-45deg);
540
  -moz-transform: rotate(-45deg);
541
  -o-transform: rotate(-45deg);
542
  -ms-transform: rotate(-45deg);
543
  transform: rotate(-45deg);
544
}
545
 
546
.squaredTwo label:hover::after {
547
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
548
  filter: alpha(opacity=30);
549
  opacity: 0.3;
550
}
551
 
552
.squaredTwo input[type=checkbox]:checked + label:after {
553
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
554
  filter: alpha(opacity=100);
555
  opacity: 1;
556
}
557
 
558
 
559
/* SQUARED THREE */
560
.squaredThree {
561
  width: 20px;
562
  margin: 20px auto;
563
  position: relative;
564
}
565
 
566
.squaredThree label {
567
  cursor: pointer;
568
  position: absolute;
569
  width: 20px;
570
  height: 20px;
571
  top: 0;
572
  border-radius: 4px;
573
 
574
  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
575
  -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
576
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
577
 
578
  background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
579
  background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
580
  background: -o-linear-gradient(top, #222 0%, #45484d 100%);
581
  background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
582
  background: linear-gradient(top, #222 0%, #45484d 100%);
583
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
584
}
585
 
586
.squaredThree label:after {
587
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
588
  filter: alpha(opacity=0);
589
  opacity: 0;
590
  content: '';
591
  position: absolute;
592
  width: 9px;
593
  height: 5px;
594
  background: transparent;
595
  top: 4px;
596
  left: 4px;
597
  border: 3px solid #fcfff4;
598
  border-top: none;
599
  border-right: none;
600
 
601
  -webkit-transform: rotate(-45deg);
602
  -moz-transform: rotate(-45deg);
603
  -o-transform: rotate(-45deg);
604
  -ms-transform: rotate(-45deg);
605
  transform: rotate(-45deg);
606
}
607
 
608
.squaredThree label:hover::after {
609
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
610
  filter: alpha(opacity=30);
611
  opacity: 0.3;
612
}
613
 
614
.squaredThree input[type=checkbox]:checked + label:after {
615
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
616
  filter: alpha(opacity=100);
617
  opacity: 1;
618
}
619
 
620
/* SQUARED FOUR */
621
.squaredFour {
622
  width: 20px;
623
  margin: 20px auto;
624
  position: relative;
625
}
626
 
627
.squaredFour label {
628
  cursor: pointer;
629
  position: absolute;
630
  width: 20px;
631
  height: 20px;
632
  top: 0;
633
  border-radius: 4px;
634
 
635
  -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
636
  -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
637
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
638
  background: #fcfff4;
639
 
640
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
641
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
642
  background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
643
  background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
644
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
645
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
646
}
647
 
648
.squaredFour label:after {
649
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
650
  filter: alpha(opacity=0);
651
  opacity: 0;
652
  content: '';
653
  position: absolute;
654
  width: 9px;
655
  height: 5px;
656
  background: transparent;
657
  top: 4px;
658
  left: 4px;
659
  border: 3px solid #333;
660
  border-top: none;
661
  border-right: none;
662
 
663
  -webkit-transform: rotate(-45deg);
664
  -moz-transform: rotate(-45deg);
665
  -o-transform: rotate(-45deg);
666
  -ms-transform: rotate(-45deg);
667
  transform: rotate(-45deg);
668
}
669
 
670
.squaredFour label:hover::after {
671
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
672
  filter: alpha(opacity=30);
673
  opacity: 0.5;
674
}
675
 
676
.squaredFour input[type=checkbox]:checked + label:after {
677
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
678
  filter: alpha(opacity=100);
679
  opacity: 1;
680
}
681
 
 

CSS Checkbox Styles

CSSDeck G+