Share Social media round buttons

Round Social Media Icons Using CSS3

Social Media Icon Round

<div class="hoverlay">
     <h2><a href="http://www.jquery2dotnet.com/">Share Social media share round button</a></h2>
    <div class="facebook-share hovereffect"><i class="icon-facebook icon-3x"></i></div>
    <div class="twitter-share hovereffect"><i class="icon-twitter icon-3x"></i></div>
    <div class="google-share hovereffect"><i class="icon-google-plus icon-3x"></i></div>
    <div class="pinterest-share hovereffect"><i class="icon-pinterest icon-3x"></i></div>
</div>
.facebook-share,.twitter-share,.google-share,.pinterest-share{border-radius:50%;width:100px;height:100px;background:#706665;transition:all .6s cubic-bezier(0.34,0.67,0.17,0.95);position:absolute;right:15px;bottom:15px;z-index:-1;}
.hovereffect:hover:after{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}
.hovereffect:after{top:-2px;left:-2px;position:absolute;width:100%;height:100%;border-radius:50%;content:'';-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-transition:0 .2s opacity .2s;-webkit-transform:scale(0.8);-moz-transition:0 .2s opacity .2s;-moz-transform:scale(0.8);-ms-transform:scale(0.8);transition:transform .2s opacity .2s;transform:scale(0.8);opacity:0;padding:2px;}
i{text-align:center;vertical-align:middle;line-height:100px!important;margin-left:30%;color:#fff;}
.facebook-share i{margin-left:39%;}
.facebook-share:hover{background:#3B5998;cursor:pointer;}
.facebook-share:after{box-shadow:0 0 0 4px #3B5998;}
.twitter-share:hover{background:#4099FF;cursor:pointer;}
.twitter-share:after{box-shadow:0 0 0 4px #4099FF;}
.google-share:hover{background:#d34836;cursor:pointer;}
.google-share:after{box-shadow:0 0 0 4px #d34836;}
.pinterest-share:hover{background:#c92228;cursor:pointer;}
.pinterest-share:after{box-shadow:0 0 0 4px #c92228;}
.facebook-share{position:absolute;top:100px;left:25px;z-index:1;}
.twitter-share{position:absolute;top:100px;left:150px;z-index:1;}
.google-share{position:absolute;top:215px;left:25px;z-index:1;}
.pinterest-share{position:absolute;top:215px;left:150px;z-index:1;}
DEMO
Share Social media round buttons Share Social media round buttons Reviewed by Bhaumik Patel on 6:57 PM Rating: 5