5种漂亮的纯CSS3动画按钮特效

这次我们要来分享一款很不错的CSS3按钮动画，这款CSS3按钮一共有5种动画方式，每一种都是鼠标滑过动画形式，虽然这些动画按钮不是十分华丽，但是小编觉得不像其他按钮那样很难扩展，我们可以修改CSS代码随意改变自己喜欢的颜色样式。

在线预览源码下载

实现的代码。

html代码：

<!--button01--><div class="button01">      <a href="#">Download</a>      <p class="top">click to begin</p>      <p class="bottom">1.2MB .zip</p>    </div><!--button01-->  <!--button--02--><div class="button02"><a class="box">My box with glow</a></div> <!--end button02--><!--button03--><div id="menu">    <ul>        <li><a href="#">Home</a><a href="#">See Us</a></li>        <li><a href="#">About</a><a href="#">Meet Us</a></li>        <li><a href="#">Contact</a><a href="#">Email Us</a></li>    </ul></div><!--end button03--><!--button04--><div id="main"><ul id="navigationMenu">    <li>        <a class="home" href="#">            <span>Home</span>        </a>    </li>        <li>        <a class="about" href="#">            <span>About</span>        </a>    </li>        <li>         <a class="services" href="#">            <span>Services</span>         </a>    </li>        <li>        <a class="portfolio" href="#">            <span>Portfolio</span>        </a>    </li>        <li>        <a class="contact" href="#">            <span>Contact us</span>        </a>    </li></ul>    </div><!---end button04--><!---button05--><div id="container">    <a href="#nogo" class="button05">Login ►</a>    <a href="#nogo" class="button05">Register ♥</a></div><!---end button05-->

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{    back