Arkadaşlar çok güzel bi imleç kodu buldum inşallah size de faydası olur.


HTML KODU












CSS KODU
@import url(http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);

.megabutton {
perspective: 25em;
position: absolute;
top: 30%;
left: 50%;
font-size: 250%;
height: 1.5em;
width: 5em;
margin: 0 -2.5em;
border-radius: .25em;
background: #aaa;
transition: all .3s;
text-align: center;
line-height: 1.5em;

&:before {
position: absolute;
top: 0;
left: 0;
z-index: 2;
color: #fff;
text-align: center;
line-height: 1.65em;
height: 1.5em;
width: 5em;
margin-bottom: -2em;
border-radius: .25em;
transform-style: preserve-3d;
transform-origin: top;
transition: all .3s;
}

&:hover {
background: #ddd;
}

&:hover:before {
transform: rotateX(110deg);
}
}

.megabutton-twitter {
top: 25%;
}

.megabutton-facebook {
top: 45%;
}

.megabutton-googleplus {
top: 65%;
}

.megabutton-twitter:before {
background: #00aced;
}

.megabutton-facebook:before {
background: #3b5998;
}

.megabutton-googleplus:before {
background: #dd4b39;
}

.megabutton-twitter iframe {
position: relative;
top: -3px;
}

.megabutton-facebook iframe {
position: relative;
top: -20px;
}

JS KODU
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=481527111909443";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));


(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

DEMO



ÇALIŞMA SAHİBİ : NILS SCHÖNWALD