Animated Circle Menu in CSS

Create Beautifull Animated Circle menu in css with this code.The circles size is smoothly increases when you hover on it.

CSS

#menu
{
 margin:50px;
 padding:0px;
 list-style:none;
}
#menu li
{
 float:left;
}
#menu li a
{
 display:block;
 width:100px;
 height:100px;
 background:#090;
 color:#fff;
 line-height:100px;
 text-align:center;
 text-decoration:none;
 margin:0px 10px;
 border:solid 2px #fff;
 box-shadow:0px 0px 10px #999;
 -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
         border-radius: 100px;
        -webkit-transition: all .2s ease-out; 
        -moz-transition: all .2s ease-out; 
        -o-transition: all .2s ease-out; 
        transition: all .2s ease-out;
}
#menu li a:hover
{
   -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2);
   -ms-transform: scale(1.2);
   filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
   M11=1.2, M12=-0, M21=0, M22=1.2)
}

HTML

Home
About Us
Services
Contact Us

Download File Used in this example View Live Demo