这次我们要来分享一款很不错的css3按钮动画，这款css3按钮一共有5种动画方式，每一种都是鼠标滑过动画形式，虽然这些动画按钮不是十分华丽，但是小编觉得不像其他按钮那样很难扩展，我们可以修改css代码随意改变自己喜欢的颜色样式。
在线预览   源码下载
实现的代码。
html代码：
download click to begin
1.2mb .zip
my box with glow
homesee us aboutmeet us contactemail us
home about services portfolio contact us
login ? register ?

css3代码：
* { padding: 0; margin: 0;}a{ transition-duration:0.4s, 0.5s; transition-property:background-color, color; transition-timing-function:ease, ease;}body{font-family:arial;}/*********************************button 01********************************/.button01 { width: 200px; margin: 50px auto 20px auto;}.button01 a { display: block; height: 50px; width: 200px; /*type*/ color: white; font: 17px/50px helvetica, verdana, sans-serif; text-decoration: none; text-align: center; text-transform: uppercase; /*gradient*/ background: #00b7ea; /* old browsers */ background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* chrome,safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* ie10+ */ background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* w3c */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#00b7ea', endcolorstr='#009ec3',gradienttype=0 ); /* ie6-9 */}.button01 a, p { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); box-shadow: 2px 2px 8px rgba(0,0,0,0.2);}p { background: #222; display: block; height: 40px; width: 180px; margin: -50px 0 0 10px; /*type*/ text-align: center; font: 12px/45px helvetica, verdana, sans-serif; color: #fff; /*position*/ position: absolute; z-index: -1; /*transition*/ -webkit-transition: margin 0.5s ease; -moz-transition: margin 0.5s ease; -o-transition: margin 0.5s ease; -ms-transition: margin 0.5s ease; transition: margin 0.5s ease;}/*hover*/.button01:hover .bottom { margin: -10px 0 0 10px;}.button01:hover .top { margin: -80px 0 0 10px; line-height: 35px;}/*active*/.button01 a:active { background: #00b7ea; /* old browsers */ background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* chrome,safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* ie10+ */ background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* w3c */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#00b7ea', endcolorstr='#009ec3',gradienttype=0 ); /* ie6-9 */}.button01:active .bottom { margin: -20px 0 0 10px;}.button01:active .top { margin: -70px 0 0 10px;}/*****************************button 01**********************************//*****************************button 02*****************************/div.button02{ color: #333; font-size: 12px; line-height: 1.64; margin:0 auto ;}.box { background: #1c1c1c; color: #0099ff; cursor: pointer; display: block; margin: 40px auto; padding: 20px; text-align: center; width: 150px; transition:all 1s ease-out; -webkit-transition: -webkit-box-shadow 0.5s ease-out; -moz-transition: -moz-box-shadow 0.5s ease-out; -o-transition: box-shadow 0.5s ease-out;}.box:hover { -moz-box-shadow: 0px 0px 15px #0099ff; -webkit-box-shadow: 0px 0px 15px #0099ff; box-shadow: 0px 0px 15px #0099ff;}a:hover { color: #0088cc; text-decoration: underline;} /*********************************end button02***********************//*********************************button03***********************************/#menu { height: 100px; width: 630px; overflow: hidden; margin: 40px auto; text-align: center;}#menu ul li { float: left; margin: 0 5px; list-style-type: none;}/* menu link styles */#menu ul a { display: block; background: #e70f23; color: #fff; height: 100px; width: 200px; font: lighter 2em/100px helvetica neue, arial, helvetica, geneva, sans-serif; text-decoration: none; -webkit-transition: margin .4s ease-in-out; -moz-transition: margin .4s ease-in-out; -o-transition: margin .4s ease-in-out; -ms-transition: margin .4s ease-in-out; transition: margin .4s ease-in-out;}/* secondary link styles */#menu ul a:nth-of-type(even) { background: #000; color: white;}/* hover slide */#menu ul li:hover :first-child { margin-top: -100px;} /***********************************end button03***********************************//***********************************button04***********************************/#navigationmenu li{ list-style:none; height:39px; padding:2px; width:40px;}#navigationmenu span{ /* container properties */ width:0; left:38px; padding:0; position:absolute; overflow:hidden; /* text properties */ font-family:'myriad pro',arial, helvetica, sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px; /* css3 transition: */ -webkit-transition: 0.25s; /*-o-transition: 0.25s;*/ /* future proofing (these do not work yet): */ -moz-transition: 0.25s; transition: 0.25s;}#navigationmenu a{ background:#c30; height:39px; width:38px; display:block; position:relative;}/* general hover styles */#navigationmenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }#navigationmenu a:hover{ text-decoration:none; /* css outer glow with the box-shadow property */ -moz-box-shadow:0 0 5px #9ddff5; -webkit-box-shadow:0 0 5px #9ddff5; box-shadow:0 0 5px #9ddff5;}/* green button */#navigationmenu .home {}#navigationmenu .home:hover { background-position:0 -39px;}#navigationmenu .home span{ background-color:#7da315; color:#3d4f0c; text-shadow:1px 1px 0 #99bf31;}/* blue button */#navigationmenu .about { }#navigationmenu .about:hover { background-position:-38px -39px;}#navigationmenu .about span{ background-color:#1e8bb4; color:#223a44; text-shadow:1px 1px 0 #44a8d0;}/* orange button */#navigationmenu .services { }#navigationmenu .services:hover { background-position:-76px -39px;}#navigationmenu .services span{ background-color:#c86c1f; color:#5a3517; text-shadow:1px 1px 0 #d28344;}/* yellow button */#navigationmenu .portfolio {}#navigationmenu .portfolio:hover{ background-position:-114px -39px;}#navigationmenu .portfolio span{ background-color:#d0a525; color:#604e18; text-shadow:1px 1px 0 #d8b54b;}/* purple button */#navigationmenu .contact { }#navigationmenu .contact:hover { background-position:-152px -39px;}#navigationmenu .contact span{ background-color:#af1e83; color:#460f35; text-shadow:1px 1px 0 #d244a6;}/* the styles below are only needed for the demo page */#main{ margin:40px auto; position:relative; width:40px;}/***********************end button04***************************//***********************button05*****************************/#container { width: 450px; margin:40px auto;}.button05 { position: relative; display: inline-block; min-width: 150px; padding: 10px 15px; margin: 0px 10px; background-color: #3e9ed6; background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(112,181,242)), color-stop(0.49, rgb(84,164,238)), color-stop(0.5, rgb(54,144,240)), color-stop(1, rgb(26,97,219)) ); background-image: -moz-linear-gradient( center top, rgb(112,181,242) 0%, rgb(84,164,238) 49%, rgb(54,144,240) 50%, rgb(26,97,219) 100% ); color: #fff; font-weight: bold; font-size: 24px; text-decoration: none; text-align: center; line-height: 1; text-shadow: 0px -1px 0px rgba(0,0,0,0.5); border: 1px solid; border-color: #2f71a3 #265a82 #1e4766 #265a82; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2), inset 0px 1px 5px rgba(255,255,255,0.2), /**/ 0px 2px 0px #1e4766, 0px 4px 0px #1e4766, 0px 6px 0px #1e4766, /**/ 0px 8px 5px rgba(0,0,0,0.5); -moz-box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2), inset 0px 1px 5px rgba(255,255,255,0.2), /**/ 0px 2px 0px #1e4766, 0px 4px 0px #1e4766, 0px 6px 0px #1e4766, /**/ 0px 8px 5px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2), inset 0px 1px 5px rgba(255,255,255,0.2), /**/ 0px 2px 0px #1e4766, 0px 4px 0px #1e4766, 0px 6px 0px #1e4766, /**/ 0px 8px 5px rgba(0,0,0,0.5);}.button05:hover { background-color: #8ac5fd; background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(134,193,253)), color-stop(0.49, rgb(153,213,255)), color-stop(0.5, rgb(130,194,253)), color-stop(1, rgb(108,170,229)) ); background-image: -moz-linear-gradient( center top, rgb(134,193,253) 0%, rgb(153,213,255) 49%, rgb(130,194,253) 50%, rgb(108,170,229) 100% );}.button05:active { top: 4px; box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4), inset 0px -1px 5px rgba(255,255,255,0.2), /**/ 0px 2px 0px #1e4766, /**/ 0px 4px 5px rgba(0,0,0,0.5); -moz-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4), inset 0px -1px 5px rgba(255,255,255,0.2), /**/ 0px 2px 0px #1e4766, /**/ 0px 4px 5px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4), inset 0px -1px 5px rgba(255,255,255,0.2), /**/ 0px 2px 0px #1e4766, /**/ 0px 4px 5px rgba(0,0,0,0.5);}/***********************end button05*****************************/