Ajax Loader
×
HTML
<div class="social-contain">
1
<div class="social-contain">
2
<ul id="social">
3
<li><a class="soc-fb" href="#" target="_blank"></a></li>
4
<li><a class="soc-twi" href="#" target="_blank"></a></li>
5
<li><a class="soc-gp" href="#" target="_blank"></a></li>
6
<li><a class="soc-pin" href="#" target="_blank"></a></li>
7
<li><a class="soc-rss" href="#"></a></li>
8
</ul>
9
</div>
10
 
11
 
 
CSS
body{
1
body{
2
background: #222;
3
}
4
.social-contain {
5
 margin-top: 160px;
6
 text-align: center;
7
 width: auto;
8
 }
9
 
10
ul#social {
11
 position: relative;
12
 margin:0 auto;
13
 }
14
 
15
ul#social li {
16
 float: left;
17
 margin-right: 1px;
18
 list-style:none;
19
 }
20
 
21
ul#social li:last-child {
22
 margin-right: 0;
23
 }
24
 
25
ul#social li a {
26
 display: block;
27
 }
28
 
29
.soc-fb {
30
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) 0 0;
31
 position: relative;
32
 width: 58px;
33
 height: 58px;
34
 }
35
 
36
.soc-fb:hover {
37
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) 0 -58px;
38
 }
39
 
40
.soc-twi {
41
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -58px 0;
42
 position: relative;
43
 width: 58px;
44
 height: 58px;
45
 }
46
 
47
.soc-twi:hover {
48
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -58px -58px;
49
 }
50
 
51
.soc-gp {
52
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -116px 0;
53
 position: relative;
54
 width: 58px;
55
 height: 58px;
56
 }
57
 
58
.soc-gp:hover {
59
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -116px -58px;
60
 }
61
 
62
.soc-pin {
63
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -174px 0;
64
 position: relative;
65
 width: 58px;
66
 height: 58px;
67
 }
68
 
69
.soc-pin:hover {
70
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -174px -58px;
71
 }
72
 
73
.soc-rss {
74
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -232px 0;
75
 position: relative;
76
 width: 58px;
77
 height: 58px;
78
 }
79
 
80
.soc-rss:hover {
81
 background: url(http://3.bp.blogspot.com/-JYpgn0wvEkE/UeepEYesMqI/AAAAAAAAHQI/khgz8VGPBks/s1600/social-but.png) -232px -58px;
82
 }
 

CSS3 Animated Social Buttons

CSSDeck G+