Aug 15, 2010

Flash like Growing Bubble Effect with CSS

In this post we will learn to create one more cool effect with pure Css. In this effect bubbles grows on hover and looks so cool. I am using pure CSS and CSS3(for easing).

CODE

CSS

.bub{
  text-decoration:none;
  text-align:center;
  position:absolute;
  top:200px;
  left:200px;
  width:50px;
  height:50px;
  background-color:#33CCFF;
  border-radius:50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  font-family: 'MuseoCustom', 'Century Gothic', Arial, Helvetica, sans-serif;
  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;
}
 

HTML

<a class="bub" href="http://twitter.com/motyar">
<i>Twitter</i>
<span>Follow me <br /> on twitter</span>
</a> 

<a class="bub" href="http://facebook.com/motyar" 

 style="margin-left:50px;background-color:#3B5998;">
<i>Facebook</i>
<span>Be Friend <br /> on facebook</span>
</a> 

<a class="bub" href="http://feeds.feedburner.com/motyarblogspot"  

style="margin-left:100px;background-color:#F15E28;">
<i>RSS</i><span>Get Free Update <br /> via RSS</span>
</a>


<a class="bub" href="http://www.linkedin.com/in/dharmmotyar"  

style="margin-left:150px;background-color:#60AACE;">
<i>LinkedIn</i>
<span>Add me<br />to your Network</span>
</a>
 

Demo

You can see the working demo here. Open it in Chrome or Safari to see the easing effect.

Labels: Animation, css, Tip, Tutorials

By : Motyar+ @motyar