Ajax Loader
HTML 
 <h1>Hover they</h1>
1
 <h1>Hover they</h1>
2
 
3
   <div class="container">
4
      <div class="cell ">
5
        <div class="share-wrapper left">
6
          <div class="rc10 share-action icon-share"></div>
7
          <div class="share-container rc10">
8
            <a class="share-btn tl icon-google-plus" href='#'></a>  
9
            <a class="share-btn tr icon-twitter" href='#'></a>  
10
            <a class="share-btn br icon-facebook" href='#'></a>  
11
            <a class="share-btn bl icon-pinterest" href='#'></a>  
12
          </div>
13
        </div>
14
      </div>
15
      <div class="cell ">
16
        <div class="share-wrapper top">
17
          <div class="rc10 share-action icon-share"></div>
18
          <div class="share-container rc10">
19
            <a class="share-btn tl icon-google-plus" href='#'></a>  
20
            <a class="share-btn tr icon-twitter" href='#'></a>  
21
            <a class="share-btn br icon-facebook" href='#'></a>  
22
            <a class="share-btn bl icon-pinterest" href='#'></a>  
23
          </div>
24
        </div>
25
      </div>
26
          <div class="cell">
27
        <div class="share-wrapper below">
28
          <div class="rc10 share-action icon-share"></div>
29
          <div class="share-container rc10 ">
30
            <a class="share-btn tl icon-google-plus" href='#'></a>  
31
            <a class="share-btn tr icon-twitter" href='#'></a>  
32
            <a class="share-btn br icon-facebook" href='#'></a>  
33
            <a class="share-btn bl icon-pinterest" href='#'></a>  
34
          </div>
35
        </div>
36
      </div>
37
      <div class="cell ">
38
        <div class="share-wrapper bottom">
39
          <div class="rc10 share-action icon-share"></div>
40
          <div class="share-container rc10">
41
            <a class="share-btn tl icon-google-plus" href='#'></a>  
42
            <a class="share-btn tr icon-twitter" href='#'></a>  
43
            <a class="share-btn br icon-facebook" href='#'></a>  
44
            <a class="share-btn bl icon-pinterest" href='#'></a>  
45
          </div>
46
        </div>
47
      </div>
48
      <div class="cell ">
49
        <div class="share-wrapper right">
50
          <div class="rc10 share-action icon-share"></div>
51
          <div class="share-container rc10">
52
            <a class="share-btn tl icon-google-plus" href='#'></a>  
53
            <a class="share-btn tr icon-twitter" href='#'></a>  
54
            <a class="share-btn br icon-facebook" href='#'></a>  
55
            <a class="share-btn bl icon-pinterest" href='#'></a>  
56
          </div>
57
        </div>
58
      </div>
59
60
      <div class="cell ">
61
        <div class="share-wrapper left">
62
          <div class="share-action icon-share"></div>
63
          <div class="share-container">
64
            <a class="share-btn tl icon-google-plus" href='#'></a>  
65
            <a class="share-btn tr icon-twitter" href='#'></a>  
66
            <a class="share-btn br icon-facebook" href='#'></a>  
67
            <a class="share-btn bl icon-pinterest" href='#'></a>  
68
          </div>
69
        </div>
70
      </div>
71
      <div class="cell ">
72
        <div class="share-wrapper top">
73
          <div class="share-action icon-share"></div>
74
          <div class="share-container">
75
            <a class="share-btn tl icon-google-plus" href='#'></a>  
76
            <a class="share-btn tr icon-twitter" href='#'></a>  
77
            <a class="share-btn br icon-facebook" href='#'></a>  
78
            <a class="share-btn bl icon-pinterest" href='#'></a>  
79
          </div>
80
        </div>
81
      </div>
82
      <div class="cell ">
83
        <div class="share-wrapper below">
84
          <div class="share-action icon-share"></div>
85
          <div class="share-container">
86
            <a class="share-btn tl icon-google-plus" href='#'></a>  
87
            <a class="share-btn tr icon-twitter" href='#'></a>  
88
            <a class="share-btn br icon-facebook" href='#'></a>  
89
            <a class="share-btn bl icon-pinterest" href='#'></a>  
90
          </div>
91
        </div>
92
      </div>
93
      <div class="cell ">
94
        <div class="share-wrapper bottom">
95
          <div class="share-action icon-share"></div>
96
          <div class="share-container">
97
            <a class="share-btn tl icon-google-plus" href='#'></a>  
98
            <a class="share-btn tr icon-twitter" href='#'></a>  
99
            <a class="share-btn br icon-facebook" href='#'></a>  
100
            <a class="share-btn bl icon-pinterest" href='#'></a>  
101
          </div>
102
        </div>
103
      </div>
104
      <div class="cell ">
105
        <div class="share-wrapper right">
106
          <div class="share-action icon-share"></div>
107
          <div class="share-container">
108
            <a class="share-btn tl icon-google-plus" href='#'></a>  
109
            <a class="share-btn tr icon-twitter" href='#'></a>  
110
            <a class="share-btn br icon-facebook" href='#'></a>  
111
            <a class="share-btn bl icon-pinterest" href='#'></a>  
112
          </div>
113
        </div>
114
      </div>
115
          <div class="cell ">
116
        <div class="share-wrapper left">
117
          <div class="rc50 share-action icon-share"></div>
118
          <div class="share-container rc50">
119
            <a class="share-btn tl icon-google-plus" href='#'></a>  
120
            <a class="share-btn tr icon-twitter" href='#'></a>  
121
            <a class="share-btn br icon-facebook" href='#'></a>  
122
            <a class="share-btn bl icon-pinterest" href='#'></a>  
123
          </div>
124
        </div>
125
      </div>
126
      <div class="cell ">
127
        <div class="share-wrapper top">
128
          <div class="rc50 share-action icon-share"></div>
129
          <div class="share-container rc50">
130
            <a class="share-btn tl icon-google-plus" href='#'></a>  
131
            <a class="share-btn tr icon-twitter" href='#'></a>  
132
            <a class="share-btn br icon-facebook" href='#'></a>  
133
            <a class="share-btn bl icon-pinterest" href='#'></a>  
134
          </div>
135
        </div>
136
      </div>
137
 
138
          <div class="cell">
139
          <div class="share-wrapper below">
140
          <div class="rc50 share-action icon-share"></div>
141
          <div class="share-container rc50">
142
            <a class="share-btn tl icon-google-plus" href='#'></a>  
143
            <a class="share-btn tr icon-twitter" href='#'></a>  
144
            <a class="share-btn br icon-facebook" href='#'></a>  
145
            <a class="share-btn bl icon-pinterest" href='#'></a>  
146
          </div>
147
        </div>
148
      </div>
149
      <div class="cell ">
150
        <div class="share-wrapper bottom">
151
          <div class="rc50 share-action icon-share"></div>
152
          <div class="share-container rc50">
153
            <a class="share-btn tl icon-google-plus" href='#'></a>  
154
            <a class="share-btn tr icon-twitter" href='#'></a>  
155
            <a class="share-btn br icon-facebook" href='#'></a>  
156
            <a class="share-btn bl icon-pinterest" href='#'></a>  
157
          </div>
158
        </div>
159
      </div>
160
 
161
      <div class="cell ">
162
        <div class="share-wrapper right">
163
          <div class="rc50 share-action icon-share"></div>
164
          <div class="share-container rc50">
165
            <a class="share-btn tl icon-google-plus" href='#'></a>  
166
            <a class="share-btn tr icon-twitter" href='#'></a>  
167
            <a class="share-btn br icon-facebook" href='#'></a>  
168
            <a class="share-btn bl icon-pinterest" href='#'></a>  
169
          </div>
170
        </div>
171
      </div>
172
    </div>
 
CSS 
.share-wrapper,
1
.share-wrapper,
2
.share-action {
3
  width: 32px;
4
  height: 32px;
5
}
6
 
7
.share-wrapper {
8
  font: 14px, 'FontAwesome';
9
  position: relative;
10
  text-align: center;
11
}
12
 
13
 
14
.share-container {
15
  margin-left: 0px;
16
  margin-top:  0px;
17
  overflow: hidden;
18
  transition: all 0.3s cubic-bezier(.05,.93,.61,1.6);
19
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.5);
20
  width: 0px;
21
  height: 0px;
22
  background: #fff;
23
}
24
 
25
 
26
.share-action:hover ~ .share-container,
27
.share-container:hover {
28
  width: 100px;
29
  height: 100px;
30
 
31
  overflow: visible;
32
}
33
 
34
 
35
 
36
.share-container:after,
37
.share-container:before {
38
  position: absolute;
39
  background:  linear-gradient(rgba(136, 221, 255, 0.5) 0%, rgba(34, 153, 221, 0.5) 50%, rgba(136, 221, 255, 0.5) 100%);
40
  z-index:4;
41
  margin: 0;
42
  transition: all 0.5s ease-in-out;
43
  content: '';
44
}
45
 
46
.share-container:before {
47
  background:  linear-gradient(left, rgba(136, 221, 255, 0.5) 0%, rgba(34, 153, 221, 0.5) 50%, rgba(136, 221, 255, 0.5) 100%);
48
  height: 1px;
49
  margin: 50% 50%;
50
  width: 0%;
51
}
52
 
53
.share-action:hover ~ .share-container:before,
54
.share-container:hover:before {
55
  width: 85%;
56
  left: 0px;
57
  margin: 50% 7%;
58
}
59
 
60
 
61
.share-container:after {
62
  left: -1px;
63
  height: 0%;
64
  width: 1px;
65
  margin: 50% 50%;
66
}
67
 
68
.share-action:hover ~ .share-container:after,
69
.share-container:hover:after {
70
  height: 85%;
71
  margin: 7% 50%;
72
}
73
 
74
.share-action {
75
  display: inline-block;
76
  vertical-align: middle;
77
  z-index: 5;
78
  position: relative;
79
  background: linear-gradient(#8df 0%, #29d 100%);
80
  box-shadow: 0 1px 5px rgba(255, 255, 255, 0.5) inset, 0 0 0px 1px rgba(33, 112, 178, 0.5);
81
  line-height: 33px;
82
  color: #fff;
83
}
84
 
85
.share-btn {
86
  display:inline-block;
87
  width: 49%;
88
  height: 49%;
89
  position: absolute;
90
  z-indez:1;
91
  border-color: #92888f;
92
  border-style: solid;
93
  border-width: 0;
94
  font-size: 0px;
95
  color: #777777;
96
  overflow: hidden;
97
}
98
 
99
.share-action:hover ~ .share-container .share-btn ,
100
.share-container:hover .share-btn  {
101
  overflow: visible;
102
  font-size: 25px;
103
}
104
 
105
.share-btn:hover {
106
  background:linear-gradient(#8df 0%, #29d 100%);
107
  color: #ffffff;
108
  text-shadow: 0 -1px #4298e0;
109
}
110
 
111
.share-btn.tl {
112
  right: 50%;
113
  bottom: 50%;
114
115
}
116
.share-btn.tr {
117
  left: 50%;
118
  bottom: 50%;
119
120
}
121
.share-btn.br {
122
  left: 50%;
123
  top: 50%;
124
125
}
126
.share-btn.bl {
127
  right: 50%;
128
  top: 50%;
129
130
}
131
 
132
.share-btn {
133
  line-height: 50px;
134
}
135
 
136
.rc50 {
137
  border-radius: 50%;
138
}
139
.rc50 .share-btn.tl {
140
  border-top-left-radius: 100%;
141
}
142
.rc50 .share-btn.tr {
143
  border-top-right-radius: 100%;
144
}
145
.rc50 .share-btn.br {
146
  border-bottom-right-radius: 100%;
147
}
148
.rc50 .share-btn.bl {
149
  border-bottom-left-radius: 100%;
150
}
151
 
152
.rc50.share-container .share-btn.tl {
153
  text-indent: 5px;
154
  line-height: 55px;
155
}
156
.rc50.share-container .share-btn.tr {
157
  line-height: 50px;
158
}
159
.rc50.share-container .share-btn.br {
160
  line-height: 46px;
161
  text-indent: -2px;
162
}
163
.rc50.share-container .share-btn.bl {
164
  text-indent: 2px;
165
  line-height: 47px;
166
}
167
 
168
 
169
.rc10 {
170
  border-radius: 10%;
171
}
172
.below .share-btn.tl,
173
.rc10 .share-btn.tl {
174
  line-height: 50px;
175
}
176
.below .share-btn.tr,
177
.rc10 .share-btn.tr {
178
  line-height: 45px;
179
  text-indent: 3px;
180
}
181
 
182
.below .share-btn.br,
183
.rc10 .share-btn.br {
184
  line-height: 50px;
185
}
186
 
187
.below .share-btn.bl,
188
.rc10 .share-btn.bl {
189
  text-indent: -2px;
190
  line-height: 55px;
191
}
192
.rc10 .share-btn.tl {
193
  border-top-left-radius: 20%;
194
}
195
.rc10 .share-btn.tr {
196
  border-top-right-radius: 20%;
197
}
198
 
199
.rc10 .share-btn.br {
200
  border-bottom-right-radius: 20%;
201
}
202
 
203
.rc10 .share-btn.bl {
204
  border-bottom-left-radius: 20%;
205
}
206
 
207
/** positions **/
208
 
209
.below.share-wrapper {
210
  margin: 50% auto;
211
  top: -16px;
212
}
213
.bottom.share-wrapper {
214
  margin: 25% auto 0;
215
}
216
.top.share-wrapper {
217
  margin: 65% auto 0;
218
}
219
.left.share-wrapper {
220
  margin: 50% 0 0 65%;
221
  top: -16px;
222
}
223
.right.share-wrapper {
224
  margin: 50% 0 0 25%;
225
  top: -16px;
226
}
227
 
228
.below .share-container {
229
  position: absolute;
230
  top: 50%;
231
  left: 50%;
232
}
233
 
234
.bottom .share-container,
235
.top .share-container {
236
  position: absolute;
237
  top: 0%;
238
  left: 0%;
239
}
240
 
241
.left .share-container,
242
.right .share-container {
243
  position: absolute;
244
  top: 0%;
245
  right: 50%;
246
}
247
 
248
.bottom .share-action:hover ~ .share-container .share-btn:nth-child(1):after,
249
.bottom .share-container:hover .share-btn:nth-child(1):after {
250
  content: '';
251
  border: 11px solid transparent;
252
  border-bottom-color: #fff;
253
  border-top: none;
254
  width: 0;
255
  height: 0;
256
  position: absolute;
257
  left: 100%;
258
  margin-left: -11px;
259
  margin-top: -11px;
260
}
261
 
262
.top .share-action:hover ~ .share-container .share-btn:nth-child(4):after,
263
.top .share-container:hover .share-btn:nth-child(4):after {
264
  content: '';
265
  border: 11px solid transparent;
266
  border-top-color: #fff;
267
  border-bottom: none;
268
  width: 0;
269
  height: 0;
270
  position: absolute;
271
  left: 100%;
272
  top: 100%;
273
  margin-left: -11px;
274
}
275
 
276
.left .share-action:hover ~ .share-container .share-btn:nth-child(2):after,
277
.left .share-container:hover .share-btn:nth-child(2):after {
278
  content: '';
279
  border: 11px solid transparent;
280
  border-left-color: #fff;
281
  border-right: none;
282
  width: 0;
283
  height: 0;
284
  position: absolute;
285
  left: 100%;
286
  top: 100%;
287
  margin-top: -11px;
288
}
289
 
290
.right .share-action:hover ~ .share-container .share-btn:nth-child(1):after,
291
.right .share-container:hover .share-btn:nth-child(1):after {
292
  content: '';
293
  border: 11px solid transparent;
294
  border-right-color: #fff;
295
  border-left: none;
296
  width: 0;
297
  height: 0;
298
  position: absolute;
299
  right: 100%;
300
  top: 100%;
301
  margin-top: -11px;
302
}
303
 
304
.left .share-action:hover:after,
305
.right .share-action:hover:after,
306
.bottom .share-action:hover:after,
307
.top .share-action:hover:after {
308
  position: absolute;
309
  content: '';
310
  z-index: 1;
311
}
312
 
313
.bottom .share-action:hover:after,
314
.top .share-action:hover:after {
315
  width: 200%;
316
  height: 20px;
317
  left: -50%;
318
  top: 100%;
319
}
320
 
321
.top .share-action:hover:after {
322
  top: auto;
323
  bottom: 100%;
324
  left: -50%;  
325
}
326
 
327
.left .share-action:hover:after {
328
  left: auto;
329
  width: 20px;
330
  height: 200%;
331
  top: -50%;
332
  right: 100%;
333
}
334
.right .share-action:hover:after {
335
  top: -50%;
336
  left: 100%;
337
  width: 20px;
338
  height: 200%;
339
}
340
 
341
.below .share-container,
342
.top .share-container,
343
.right .share-container,
344
.bottom .share-container {
345
  top : 0%;
346
  left: 50%;
347
}
348
.left .share-container {
349
  top : 0%;
350
  right: 50%;
351
}
352
 
353
.below .share-action:hover ~ .share-container,
354
.below .share-container:hover {
355
  top: -100%;
356
  left: -100%;
357
}
358
 
359
.bottom .share-action:hover ~ .share-container,
360
.bottom .share-container:hover {
361
  margin-left: 0px;
362
  left: -100%;
363
  top: 50px;
364
}
365
.top .share-action:hover ~ .share-container,
366
.top .share-container:hover {
367
  margin-left: 0px;
368
  left: -100%;
369
  top: -120px;
370
}
371
.left .share-action:hover ~ .share-container,
372
.left .share-container:hover {
373
  margin-right: 20px;
374
  right: 100%;
375
  top: -100%;
376
}
377
 
378
.right .share-action:hover ~ .share-container,
379
.right .share-container:hover {
380
  margin-left: 20px;
381
  left: 100%;
382
  top: -100%;
383
}
384
 
385
.bottom .rc10 .share-btn {
386
  text-indent: 0;
387
  line-height: 50px;  
388
}
389
.bottom .share-container .share-btn.tl {
390
  line-height: 55px;  
391
}
392
 
393
 
394
/*  Font Awesome
395
    the iconic font designed for use with Twitter Bootstrap
396
    -------------------------------------------------------
397
    The full suite of pictographic icons, examples, and documentation
398
    can be found at: http://fortawesome.github.com/Font-Awesome/
399
 
400
    License
401
    -------------------------------------------------------
402
    The Font Awesome webfont, CSS, and LESS files are licensed bottom CC BY 3.0:
403
    http://creativecommons.org/licenses/by/3.0/ A mention of
404
    'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
405
    source code is considered acceptable attribution (most common on the web).
406
    If human readable source code is not available to the end user, a mention in
407
    an 'About' or 'Credits' screen is considered acceptable (most common in desktop
408
    or mobile software).
409
 
410
    Contact
411
    -------------------------------------------------------
412
    Email: dave@davegandy.com
413
    Twitter: http://twitter.com/fortaweso_me
414
    Work: http://lemonwi.se co-fobottom
415
 
416
    */
417
@font-face{
418
    font-family:FontAwesome;
419
    src:url(http://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'),
420
    url(http://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'),
421
    url(http://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'),
422
    url(http://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
423
    font-weight:400;font-style:normal;}
424
 
425
 
426
/*  Font Awesome styles
427
    ------------------------------------------------------- */
428
[class^="icon-"]:before, [class*=" icon-"]:before {
429
  font-family: FontAwesome;
430
  font-weight: normal;
431
  font-style: normal;
432
  display: inline-block;
433
  text-decoration: inherit;
434
}
435
a [class^="icon-"], a [class*=" icon-"] {
436
  display: inline-block;
437
  text-decoration: inherit;
438
}
439
/* makes the font 33% larger relative to the icon container */
440
.icon-large:before {
441
  vertical-align: top;
442
  font-size: 1.3333333333333333em;
443
}
444
.btn [class^="icon-"], .btn [class*=" icon-"] {
445
  /* keeps button heights with and without icons the same */
446
 
447
  line-height: .9em;
448
}
449
li [class^="icon-"], li [class*=" icon-"] {
450
  display: inline-block;
451
  width: 1.25em;
452
  text-align: center;
453
}
454
li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
455
  /* 1.5 increased font size for icon-large * 1.25 width */
456
 
457
  width: 1.875em;
458
}
459
li[class^="icon-"], li[class*=" icon-"] {
460
  margin-left: 0;
461
  list-style-type: none;
462
}
463
li[class^="icon-"]:before, li[class*=" icon-"]:before {
464
  text-indent: -2em;
465
  text-align: center;
466
}
467
li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before {
468
  text-indent: -1.3333333333333333em;
469
}
470
/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
471
    readers do not read off random characters that represent icons */
472
.icon-facebook:before             { content: "\f09a"; }
473
.icon-twitter:before              { content: "\f099"; }
474
.icon-pinterest:before            { content: "\f0d2"; }
475
.icon-google-plus:before          { content: "\f0d5"; }
476
 
477
.icon-share:before                { content: "\f045"; }
478
 
479
/* global */
480
 
481
body {
482
  background: radial-gradient(center, ellipse cover,  #fefefe 0%, #dbe5e7 100%);
483
  background-attachment: fixed;
484
}
485
 
486
h1 {
487
  text-align: center;
488
  color: #56a6e4;
489
  font-size: 2em;
490
  font-weight: bold;
491
  padding: 5px;
492
  text-transform: uppercase;
493
}
494
a {
495
  text-decoration: none;
496
}
497
 
498
.container {
499
  width: 1000px;
500
  margin: 0 auto;
501
}
502
 
503
.cell {
504
  float: left;
505
  width: 200px;
506
  height: 200px;
507
  position: relative;
508
}
509
 
510
 
511
.debug .share-container {
512
  width: 100px;
513
  height: 100px;
514
}
 

Share it

CSSDeck G+