Ajax Loader
HTML 
<div class="container">
1
<div class="container">
2
3
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
4
  <div class="flipper">
5
    <div class="front">
6
      <!-- front content -->
7
      <span class="share entypo-export"></span>
8
    </div>
9
    <div class="back">
10
      <!-- back content -->
11
      <ul>
12
        <li class="social_square zocial-facebook facebook"></li>
13
        <li class="social_square zocial-googleplus googleplus"></li>
14
        <li class="social_square zocial-twitter twitter"></li>
15
        <li class="social_square zocial-rss rss"></li>
16
      </ul>
17
    </div>
18
  </div>
19
</div>
20
21
</div>
 
CSS 
//---- Import icons (Entypo, Zocial) We Love Icon Fonts ----//
1
//---- Import icons (Entypo, Zocial) We Love Icon Fonts ----//
2
@import url(http://weloveiconfonts.com/api/?family=entypo|zocial);
3
/* entypo */
4
[class*="entypo-"]:before {
5
  font-family: 'entypo', sans-serif;
6
}
7
 
8
/* zocial */
9
[class*="zocial-"]:before {
10
  font-family: 'zocial', sans-serif;
11
}
12
 
13
//---- Main Styles ----//
14
 
15
html, body{
16
  margin: 0;
17
  padding: 0;
18
}
19
.container{
20
position: absolute;
21
left: 50%;
22
top: 20%;
23
}
24
 
25
/* entire container, keeps perspective */
26
.flip-container {
27
  -webkit-perspective: 1000;
28
  position: relative;
29
  left: -50%;
30
 
31
  &:after{
32
  content: '';
33
  position: absolute;
34
  bottom:0;
35
  left: 0;
36
  right: 0;
37
  height: 5px;
38
 // @include box-shadow(0px 100px 100px 10px #999);
39
  display: block;
40
  }
41
}
42
  /* flip the pane when hovered */
43
  .flip-container:hover .flipper, .flip-container.hover .flipper {
44
   -webkit-transform: rotateY(180deg);
45
  }
46
 
47
.flip-container, .front, .back {
48
  width: 320px;
49
  height: 320px;
50
}
51
 
52
/* flip speed goes here */
53
.flipper {
54
  -webkit-transition: 0.6s;
55
  -webkit-transform-style: preserve-3d;
56
 
57
  position: relative;
58
}
59
 
60
/* hide back of pane during swap */
61
.front, .back {
62
  -webkit-backface-visibility: hidden;
63
 
64
  position: absolute;
65
  top: 0;
66
  left: 0;
67
}
68
 
69
/* front pane, placed above back */
70
.front {
71
  z-index: 2;
72
  background: #ddd;
73
  line-height: 320px;
74
  text-align: center;
75
 
76
  .share{
77
  font-size: 1.5em;
78
  text-align: center;
79
80
  -webkit-transition: 0.6s;
81
  -webkit-transform-style: preserve-3d;
82
 
83
  position: relative;
84
85
  @include border-radius(50%);
86
  }
87
}
88
 
89
/* back, initially hidden pane */
90
.back {
91
  -webkit-transform: rotateY(180deg);
92
  background: #333;
93
 
94
  ul{
95
  margin: 0;
96
  padding: 0;
97
  }
98
  li{
99
  list-style-type: none;
100
  float: left;
101
  width: 160px;
102
  height: 160px;
103
  line-height: 160px;
104
  text-align: center;
105
  color: white;
106
  font-size: 1.5em;
107
  
108
  &.facebook{
109
    background: #3b5998;
110
    @include box-shadow(-10px -10px 0px lighten(#3b5998, 20%));
111
    }
112
  &.googleplus{
113
    background:  #dd4b39;
114
    @include box-shadow(10px -10px 0px lighten(#dd4b39, 20%));
115
    }
116
  &.twitter{
117
    background: #00aced;
118
    @include box-shadow(-10px 10px 0px lighten(#00aced, 20%));
119
    }
120
  &.rss{
121
    background: #FF9900;
122
    @include box-shadow(10px 10px 0px lighten(#FF9900, 20%));
123
    }
124
  }
125
}
 

Social Icon Pane (Hover for effect)

CSSDeck G+