Navigation effects
Html
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title>CSS3 animated Buttons</title> <Linkhref= ' Http://fonts.googleapis.com/css?family=Hammersmith+One 'rel= ' stylesheet 'type= ' Text/css '> <Linkrel= "stylesheet"href= "Css/style.css"> </Head> <Body> <ul> <Li><ahref="#"class= "Round green">Login<spanclass= "Round">If you already has an account.</span></a></Li> <Li><ahref="#"class= "Round red">Sign Up<spanclass= "Round">But only if you really, really want to.</span></a></Li> <Li><ahref="#"class= "Round yellow">Demo<spanclass= "Round">Take a look. This product is totally rad!</span></a></Li> </ul> </Body></HTML>
Css
* {margin:0;padding:0;-moz-box-sizing:Border-box;-o-box-sizing:Border-box;-webkit-box-sizing:Border-box;box-sizing:Border-box; }Body{width:100%;Height:100%;font-family:"Helvetica Neue", Helvetica, Arial, Sans-serif;font-size:13px;text-align:Center;background:#333 url (' http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/low_contrast_linen.png '); }ul{margin:30px Auto;text-align:Center; }Li{List-style:None;position:relative;Display:Inline-block;width:100px;Height:100px; }@-moz-keyframes Rotate{0% {Transform:Rotate (0deg);}100%{Transform:Rotate ( -360deg);}} @-webkit-keyframes Rotate{0% {Transform:Rotate (0deg);}100%{Transform:Rotate ( -360deg);}} @-o-keyframes Rotate{0% {Transform:Rotate (0deg);}100%{Transform:Rotate ( -360deg);}} @keyframes Rotate{0% {Transform:Rotate (0deg);}100%{Transform:Rotate ( -360deg);}}. Round{Display:Block;position:Absolute; Left:0;Top:0;width:100%;Height:100%;Padding-top:30px;text-decoration:None;text-align:Center;font-size:25px;Text-shadow:0 1px 0 rgba (255,255,255,.7);letter-spacing:-.065em;font-family:"Hammersmith One", Sans-serif;-webkit-transition:All . 25s Ease-in-out;-o-transition:All . 25s Ease-in-out;-moz-transition:All . 25s Ease-in-out;transition:All . 25s Ease-in-out;Box-shadow:2px 2px 7px rgba (0,0,0,.2);Border-radius:300px;Z-index:1;Border-width:4px;Border-style:Solid;Border-color:#ff0000; }. Round:hover{width:130%;Height:130%; Left:-15%;Top:-15%;font-size:33px;Padding-top:38px;-webkit-box-shadow:5px 5px 10px rgba (0,0,0,.3);-o-box-shadow:5px 5px 10px rgba (0,0,0,.3);-moz-box-shadow:5px 5px 10px rgba (0,0,0,.3);Box-shadow:5px 5px 10px rgba (0,0,0,.3);Z-index:2;border-size:40px; }a.red{Background-color:Rgba (239,57,50,1);Color:Rgba (133,32,28,1);Border-color:Rgba (133,32,28,.2); }A.red:hover{Color:Rgba (239,57,50,1); }A.green{Background-color:Rgba (1,151,171,1);Color:Rgba (0,63,71,1);Border-color:Rgba (0,63,71,.2); }A.green:hover{Color:Rgba (1,151,171,1); }A.yellow{Background-color:Rgba (252,227,1,1);Color:Rgba (153,38,0,1);Border-color:Rgba (153,38,0,.2); }A.yellow:hover{Color:Rgba (252,227,1,1); }. Round Span.round{Display:Block;Opacity:0;-webkit-transition:All . 5s Ease-in-out;-moz-transition:All . 5s Ease-in-out;-o-transition:All . 5s Ease-in-out;transition:All . 5s Ease-in-out;font-size:1px;Border:None;padding:40% 20% 0 20%;Color:#fff; }. Round Span:hover{Opacity:. the;font-size:16px;-webkit-text-shadow:0 1px 1px rgba (0,0,0,.5);-moz-text-shadow:0 1px 1px rgba (0,0,0,.5);-o-text-shadow:0 1px 1px rgba (0,0,0,.5);Text-shadow:0 1px 1px rgba (0,0,0,.5); }. Green span{background:Rgba (0,63,71,.7); }. Red span{background:Rgba (133,32,28,.7); }. Yellow span{background:Rgba (161,145,0,.7); }
Circular Menu Animation