Ajax Loader
×

Social Share with Hover Effect

New Social Share with Hover Effect.!!

Visit Us for More Works: http://asxcage.com/ http://bloggingtronix.com/

HTML 
<div id="buttons">
1
<div id="buttons">
2
  <div class="facebook button">
3
    <i class="icon">
4
      <i class="icon-facebook">
5
    </i>
6
  </i>
7
  <div class="slide">
8
    <p>
9
      facebook
10
    </p>
11
  </div>
12
  <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:20px;" allowTransparency="true">
13
  </iframe>
14
  </div>
15
16
  <div class="twitter button">
17
    <i class="icon">
18
      <i class="icon-twitter">
19
    </i>
20
  </i>
21
  <div class="slide">
22
    <p>
23
      twitter
24
    </p>
25
  </div>
26
  <a href="https://twitter.com/share" class="twitter-share-button" data-via="mariuCSS">
27
    Tweet
28
  </a>
29
  <script>
30
    !function(d,s,id){
31
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
32
      if(!d.getElementById(id)){
33
        js=d.createElement(s);
34
        js.id=id;
35
        js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
36
  </script>
37
  </div>
38
39
  <div class="google button">
40
    <i class="icon">
41
      <i class="icon-google-plus">
42
    </i>
43
  </i>
44
  <div class="slide">
45
    <p>
46
      google+
47
    </p>
48
  </div>
49
  <!-- Place this tag where you want the +1 button to render. -->
50
  <div class="g-plusone" data-size="medium">
51
  </div>
52
53
  <!-- Place this tag after the last +1 button tag. -->
54
  <script type="text/javascript">
55
    (function() {
56
      var po = document.createElement('script');
57
      po.type = 'text/javascript';
58
      po.async = true;
59
      po.src = 'https://apis.google.com/js/plusone.js';
60
      var s = document.getElementsByTagName('script')[0];
61
      s.parentNode.insertBefore(po, s);
62
    }
63
    )();
64
  </script>
65
  </div>
66
67
68
  <div class="linkedin button">
69
    <i class="icon">
70
      <i class="icon-linkedin">
71
    </i>
72
  </i>
73
  <div class="slide">
74
    <p>
75
      linkedin
76
    </p>
77
  </div>
78
  <script type="IN/Share" data-counter="right">
79
  </script>
80
  <script src="//platform.linkedin.com/in.js" type="text/javascript">
81
    lang: en_US
82
  </script>
83
  </div>
84
</div>
85
 
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
1
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
2
 
3
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
4
 
5
html, body {
6
    min-height: 100%;
7
}
8
 
9
body {
10
    background-image: linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
11
    margin: 0;
12
}
13
 
14
#buttons {
15
    border-radius: 5px;
16
    padding: 14px 7px;
17
    background: white;
18
    width: 660px;
19
    overflow: hidden;
20
    margin: 150px auto 0;
21
    box-shadow:0 2px 3px rgba(71, 71, 71, 0.31);
22
}
23
 
24
 
25
.button {
26
    background: #DCE0E0;
27
    position: relative;
28
    display: block;
29
    float: left;
30
    height: 40px;
31
    margin: 0 7px;
32
    overflow: hidden;
33
    width: 150px;
34
    border-radius: 3px;
35
    -o-border-radius: 3px;
36
    -ms-border-radius: 3px;
37
    -moz-border-radius: 3px;
38
    -webkit-border-radius: 3px;
39
}
40
 
41
.icon {
42
    display: block;
43
    float: left;
44
    position: relative;
45
    z-index: 3;
46
    height: 100%;
47
    vertical-align: top;
48
    width: 38px;
49
    -moz-border-radius-topleft: 3px;
50
    -moz-border-radius-topright: 0px;
51
    -moz-border-radius-bottomright: 0px;
52
    -moz-border-radius-bottomleft: 3px;
53
    -webkit-border-radius: 3px 0px 0px 3px;
54
    border-radius: 3px 0px 0px 3px;
55
    text-align: center;
56
}
57
 
58
.icon i {
59
    color: #fff;
60
    line-height: 42px;
61
}
62
 
63
.slide {
64
    z-index: 2;
65
    display: block;
66
    margin: 0;
67
    height: 100%;
68
    left: 38px;
69
    position: absolute;
70
    width: 112px;
71
    -moz-border-radius-topleft: 0px;
72
    -moz-border-radius-topright: 3px;
73
    -moz-border-radius-bottomright: 3px;
74
    -moz-border-radius-bottomleft: 0px;
75
    -webkit-border-radius: 0px 3px 3px 0px;
76
    border-radius: 0px 3px 3px 0px;
77
}
78
 
79
.slide p {
80
    font-family: Open Sans;
81
    font-weight: 400;
82
    border-left: 1px solid #fff;
83
    border-left: 1px solid rgba(255,255,255,0.35);
84
    color: #fff;
85
    font-size: 16px;
86
    left: 0;
87
    margin: 0;
88
    position: absolute;
89
    text-align: center;
90
    top: 10px;
91
    width: 100%;
92
}
93
 
94
.button .slide {
95
    -webkit-transition: all 0.2s ease-in-out;
96
    -moz-transition: all 0.2s ease-in-out;
97
    -ms-transition: all 0.2s ease-in-out;
98
    -o-transition: all 0.2s ease-in-out;
99
    transition: all 0.2s ease-in-out;
100
}
101
 
102
.facebook iframe {
103
    display: block;
104
    position: absolute;
105
    right: 16px;
106
    top: 10px;
107
    z-index: 1;
108
}
109
 
110
.twitter iframe {
111
    width: 90px !important;
112
    right: 5px;
113
    top: 10px;
114
    z-index: 1;
115
    display: block;
116
    position: absolute;
117
}
118
 
119
.google #___plusone_0 {
120
    width: 70px !important;
121
    top: 10px;
122
    right: 15px;
123
    position: absolute;
124
    display: block;
125
    z-index: 1;
126
}
127
 
128
.linkedin .IN-widget {
129
    top: 10px;
130
    right: 22px;
131
    position: absolute;
132
    display: block;
133
    z-index: 1;
134
}
135
 
136
.facebook:hover .slide {
137
    left: 150px;
138
}
139
 
140
.twitter:hover .slide {
141
    top: -40px;
142
}
143
 
144
.google:hover .slide {
145
    bottom: -40px;
146
}
147
 
148
.linkedin:hover .slide {
149
    left: -150px;
150
}
151
 
152
.facebook .icon, .facebook .slide {
153
    background: #305c99;
154
}
155
 
156
.twitter .icon, .twitter .slide {
157
    background: #00cdff;
158
}
159
 
160
.google .icon, .google .slide {
161
    background: #d24228;
162
}
163
 
164
.linkedin .icon, .linkedin .slide {
165
    background: #007bb6;
166
}
 

Social Share with Hover Effect

CSSDeck G+