Example

by softvar

HTML

<div class="circle--area">
    <div class="circle">Hey!</div>
    <div class="circle circle-green">I'm Varun</div>
    <div class="circle circle-blue">This is an example</div>
</div>

<hr>
<div class="social-buttons">
    <a href="https://twitter.com/s0ftvar" class="twitter-follow-button" data-show-count="false">Follow @s0ftvar</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>
<iframe src="http://ghbtns.com/github-btn.html?user=softvar&type=follow&count=true"
  allowtransparency="true" frameborder="0" scrolling="0" width="165" height="20"></iframe>   
</div>    

    <footer>
        <a href="softvar.github.io">Varun Malhotra</a> (c) 2013
    </footer>

CSS

.circle--area {
    height:200px;
    background: #DEDEDE;
    padding:10px;
}
.circle {
    width:160px;
    height:100px;
    border-radius: 100px;
    color:#333;
    font-size:20px;
    font-weight:bold;
    background: #ff7777;
    border:2px solid #f00;
    text-align:center;
    padding-top:60px;
    float:left;
    margin-left: 4%;
}

.circle-green {
    background: #80f2d3; 
    border: 2px solid #3ca88d;
}

.circle-blue {
    background: #8ae0fc;
    border: 2px solid #0777af;
}

footer, .social-buttons {
    text-align:center;
}