五款漂亮的纯CSS3动画按钮的实例教程

  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 .bottombottom {   
  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+ */