<div id="wrapper">
<div id="wrapper">
<div id="share">
</div>
<div id="pane"></div>
<span>share</span>
</div>
@font-face{
@font-face{
src:url('https://dl.dropbox.com/u/94346812/cssdeck/fonts/FACEBOLF.ttf');
font-family:facebook;
}
html{
background:#fff;
width:100%;
height:100%;
margin:0;
padding:0;
box-shadow:inset 0 200px 100px #ccc;
}
#wrapper{
width:100px;
height:auto;
margin:auto;
box-shadow:0 20px 20px 1px #ccc;
}
#share{
width:100px;
height:70px;
margin:200px auto 0;
background:#3c5a93;
box-shadow:0 0 2px #666;
transition:all .4s ease;
border-radius:1px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}
#share:after{
content:'f';
color:#fff;
text-shadow:0 -1px 0 #3c5a93;
font-size:130px;
font-weight:bold;
line-height:1;
margin:auto 40px;
}
#pane{
display:block;
width:100px;
height:50px;
margin:auto;
background:#3c5a93;
box-shadow:0 0 2px #666;
border-radius:1px;
border-top-left-radius:0px;
border-top-right-radius:0px;
transition:margin .5s ease, background .5s ease;
}
#wrapper span{
color:#3c5a93;
font-size:32px;
margin:;
opacity:0;
font-family:facebook;
font-weight:lighter;
text-shadow:0 0 1px #fff;
transition:all .5s ease .7s;
position:absolute;
}
#wrapper span:after{
content:'';
display:block;
position:absolute;
width:100px;
height:0.01em;
background:transparent;
box-shadow:0 0 20px 1px #333;
}
#wrapper:hover > #pane{
margin:10px auto;
background:#6d85b0;
}
#wrapper:hover > #share {
margin-top:210px;
height:70px;
box-shadow:0 0 10px #cdd8e8;
}
#wrapper:hover > span{
opacity:1;
}
// Alternative Facebook share Button
// Alternative Facebook share Button
// Made with ❤ by @LukyVj