Ajax Loader
HTML 
<div class="wrapper">
1
<div class="wrapper">
2
    <ul>
3
        <li class="fb-wrp">
4
            <div class="btn-info fb">
5
              <p>8,221 Likes</p>
6
                <div class="facebook">
7
                    <a href="#non" title="Likes us">F<span>Facebook</span></a>
8
                </div>
9
            </div>
10
        </li>
11
        <li class="tr-wrp">
12
            <div class="btn-info tr">
13
              <p>2365 followers</p>
14
                <div class="twitter">
15
                    <a href="#non" title="Follow us">t <span>Twitter</span></a>
16
                </div>
17
            </div>
18
        </li>
19
        <li class="rs-wrp">
20
            <div class="btn-info rs">
21
                <p>434 Subscribers</p>
22
                <div class="rss">
23
                <a href="#non" title="Subscribe"><span>RSS Feeds</span></a>
24
                </div>
25
            </div>
26
        </li>
27
    </ul>
28
</div>•
 
CSS 
body {padding:0; margin:0; font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; background:#fff;}
1
body {padding:0; margin:0; font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; background:#fff;}
2
 
3
.wrapper {
4
    margin: 100px auto;
5
    width: 600px;
6
}
7
 
8
ul {
9
  list-style:none;
10
  padding:0;
11
  margin:0;
12
  font:0.875em/1 Arial, sans-serif;
13
}
14
 
15
ul li {
16
  float:left;
17
  width: 145px;
18
  height: 35px;
19
  margin: 0 20px 0 0;
20
  padding: 5px;
21
  position: relative;
22
  overflow: hidden;
23
}
24
 
25
ul li a {
26
  display:block;
27
  width:120px;
28
  height:35px;
29
  /*overflow:hidden;*/
30
  border:1px solid transparent;
31
  text-decoration:none;
32
 
33
  /* css3 */
34
  text-shadow:0 -1px 0 rgba(0,0,0,0.5);
35
  -moz-border-radius:5px;
36
  -webkit-border-radius:5px;
37
  border-radius:5px; /* standards version last */
38
}
39
ul li a span {
40
    position: absolute;
41
}
42
 
43
 
44
.facebook,
45
.twitter,
46
.rss {
47
    position: absolute !important;
48
    top: 0;
49
    left: 0;
50
 
51
    -webkit-transform-origin: bottom;
52
    -webkit-transition: -webkit-transform .5s ease;
53
    -webkit-transform: translateY(0) rotateX(0);
54
    -moz-transition: -moz-transform .5s ease;
55
    -moz-transform: translate(0);
56
}
57
 
58
.facebook a {
59
  position:relative;
60
  border-color:#3c5a98;
61
  text-transform:lowercase;
62
  font-weight:bold;
63
  font-size:30px;
64
  line-height:35px;
65
  color:#fff;
66
  background:#3c5a98;
67
  padding: 0 0 0 15px;
68
  width: 124px;
69
  height: 33px;
70
 
71
  /* css3 */
72
  background:-webkit-gradient(linear, left top, left bottom, from(#3c5a98), to(#324c83));
73
  background:-moz-linear-gradient(top, #3c5a98, #324c83);
74
}
75
 
76
.facebook a span {
77
    font-family: arial;
78
    text-transform: capitalize;
79
    font-size: 14px;
80
    top: 0;
81
    left: 40px;
82
    border-left: 1px solid #263b67;
83
    padding-left: 12px;
84
}
85
 
86
.twitter a {
87
  position:relative;
88
  border-color:#a8eaec;
89
  text-transform:lowercase;
90
  font:bold 25px/1 Tahoma, sans-serif;
91
  line-height:35px;
92
  color:#76DDF8;
93
  background:#daf6f7;
94
  padding: 0 0 0 15px;
95
  width: 123px;
96
  height: 33px;
97
 
98
  /* css3 */
99
  text-shadow: 2px 2px 1px #fff, -2px -2px 1px #fff, 2px -2px 1px #fff, -2px 2px 1px #fff;
100
  background:-webkit-gradient(linear, left top, left bottom, from(#dbf7f8), to(#88e1e6));
101
  background:-moz-linear-gradient(top, #dbf7f8, #88e1e6);
102
}
103
 
104
.twitter a span {
105
    font-family: arial;
106
    text-transform: capitalize;
107
    font-size: 14px;
108
    top: 0;
109
    left: 40px;
110
    border-left: 1px solid #88c1c3;
111
    padding-left: 25px;
112
    color: #4b8fa1;
113
 
114
    text-shadow: 0 1px 0 #fff;
115
}
116
 
117
.rss a {
118
  position:relative;
119
  padding:0 2px;
120
  border-color:#ea6635;
121
  text-transform:lowercase;
122
  font-size:64px;
123
  line-height: 35px;
124
  font-weight:bold;
125
  color:#fff;
126
  background:#e36443;
127
  width: 135px;
128
  height: 33px;
129
 
130
  /* css3 */
131
  background:-webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e36443));
132
  background:-moz-linear-gradient(top, #f19242, #e36443);
133
}
134
 
135
.rss a span {
136
    font-family: arial;
137
    text-transform: capitalize;
138
    font-size: 14px;
139
    top: 0;
140
    left: 40px;
141
    border-left: 1px solid #af4c33;
142
    padding-left: 12px;
143
    color: #af4c33;
144
 
145
    text-shadow: 0 1px 0 #ffc4b5;
146
}
147
 
148
/* create circle */
149
.rss a:before {
150
  content:"\00a0";
151
  position:absolute;
152
  bottom:7px;
153
  left:12px;
154
  width:6px;
155
  height:6px;
156
  background:#fff;
157
 
158
  /* css3 */
159
  -moz-border-radius:6px;
160
  -webkit-border-radius:6px;
161
  border-radius:6px;
162
}
163
 
164
/* create the two arcs */
165
.rss a:after {
166
  content:"\00a0";
167
  position:absolute;
168
  bottom:8px;
169
  left:13px;
170
  width:10px;
171
  height:10px;
172
  border-style:double;
173
  border-width:10px 10px 0 0;
174
  border-color:#fff;
175
 
176
  /* css3 */
177
  -moz-border-radius:0 25px 0 0;
178
  -webkit-border-top-right-radius:25px;
179
  border-radius:0 25px 0 0;
180
}
181
 
182
.btn-info {
183
    position:relative;
184
    background-color: #d6dbde;
185
    line-height: 15px;
186
    color: #333;
187
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
188
    font-size: .8em;
189
    font-weight: bold;
190
    width: 137px;
191
    height: 35px;
192
    overflow: hidden;
193
    padding: 0 0 0 10px;
194
    margin: 0;
195
 
196
    /* css3 */
197
    background: #fff -webkit-linear-gradient(bottom, rgb(215,219,222) 0, rgb(216,220,221) 60%, rgb(193,199,202) 100%);
198
    background: #fff -moz-linear-gradient(bottom, rgb(215,219,222) 0, rgb(216,220,221) 60%, rgb(193,199,202) 100%);
199
    -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,.2);
200
    -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,.2);
201
    -webkit-border-radius: 5px;
202
    -moz-border-radius: 5px;
203
    border-radius: 5px;
204
}
205
 
206
.fb-wrp:hover .facebook{
207
    -webkit-transform: translateX(107px);
208
}
209
.tr-wrp:hover .twitter {
210
    -webkit-transform: translateX(107px);
211
}
212
.rs-wrp:hover .rss {
213
    -webkit-transform: translateX(107px);
214
}•
 

Animated Social Sharing

CSSDeck G+