A Pen by Ian Farb.

index.html

    <div id="wrap">
        
        <div class="container">
            <div class="top-circle">
                <div class="icon icon-facebook"></div>
                
            </div>
            <div class="bottom-circle">
                <div class="social-btn">
                <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fcodepen.io&amp;width&amp;layout=box_count&amp;action=like&amp;show_faces=true&amp;share=false&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:65px;" allowTransparency="true"></iframe>
            </div>
                </div>
        </div>
        
        <div class="container">
            <div class="top-circle">
                <div class="icon icon-google-plus"></div>
            </div>
            <div class="bottom-circle">
                <div class="social-btn"><!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="tall" data-href="http://codepen.io"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  (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);
  })();
</script></div>
            </div>
        </div>
        
        <div class="container">
            <div class="top-circle">
                <div class="icon icon-twitter"></div>
            </div>
            <div class="bottom-circle">
                <div class="social-btn">
                    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://codepen.io" data-size="small" data-count="vertical">Tweet</a>
<script>!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');</script>
                    </div>
            </div>
        </div>
    
    </div>

Social-Circles.markdown

Social Circles

Trying my hand at a different approach to social media sharing buttons.

A Pen by Ian Farb on CodePen.

License.

style.css

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

* {
    margin:0;
    padding:0;
    list-style-type:none;
}

#wrap {
    margin:75px auto 0 auto;
    width: 450px;
    
}

.container {
    float:left;
    margin:15px;
    border-radius: 60px;
    overflow: hidden;
    
}

.top-circle {
    width:120px;
    height:120px;
    position: absolute;
    z-index: 100;
    -webkit-transition:.25s ease;
}

.icon {
    text-align: center;
    font-size:80px;
    color:#fff;
    padding:14px 0;
    border-radius: 60px;
   
}

.container:hover .top-circle {
    -webkit-transform: rotate(360deg);
    opacity:0;
    margin:-120px 0 0 0;
}

.icon-facebook {
    background: #3B5998;
}

.icon-google-plus {
    background: #dd4b39;
    
}

.icon-twitter {
    background: #55acee;
    
}

.bottom-circle {
    width:120px;
    height:120px;
    background: #e7e7e7;
    position: relative;
    -webkit-transition:.25s ease;
}

.social-btn {
    padding:30px 35px 35px 35px;
}