index.html

<a class="bub" href="http://twitter.com/akashnimare">
<i>Twitter</i>
<span>Follow me <br /> on twitter</span>
</a> 
 
<a class="bub" href="http://www.facebook.com/iaMrich22" 
 style="margin-left:160px;background-color:#3B5998;">
<i>Facebook</i>
<span>Be Friend <br /> on facebook</span>
</a> 
 
<a class="bub" href="http://www.akashnimare.blog.com"  
style="margin-left:550px;background-color:#F15E28;">
<i>Blog</i><span>Get Free Update <br /> via RSS</span>
</a>


<a class="bub" href="http://codepen.io/akashnimare"  
style="margin-left:360px;background-color:#60AACE;">
<i>Code</i>
<span>Add me<br />to your Network</span>
</a>

style.css

.bub{
  text-decoration:none;
  text-align:center;
  position:absolute;
  top:70px;
  left:100px;
  width:50px;
  height:50px;
  background-color:#33CCFF;
  border-radius:70px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  font-family: 'verdana', 'Century Gothic', Arial, Helvetica, verdana;
  font-size:110%;
  line-height:1.4em;
  color:#FFf;
}

.bub:hover{
  top:130px;  left:130px;  width:200px;  height:200px;  border-radius:400px;
  -moz-border-radius: 400px;
  -webkit-border-radius: 400px;
  -webkit-transition: ease 1s;
   -moz-transition: ease 1s;
   z-index:10;
}

.bub i{
  top:12px;  position:relative;  font-size:60%;  text-transform:none;
}
.bub span{
display:none;
position:relative;
top:80px;
text-decoration:none;
 }
.bub:hover span{
display:block;
}