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

2020-05-02 08:23:09易采站长站整理

      background: -webkit-gradient(linear, left top, left bottombottom, 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 .bottombottom {   
  margin: -20px 0 0 10px;   
}   
  
.button01:active .top {   
  margin: -70px 0 0 10px;   
}  

 相关推荐:

  纯css3实现的动画按钮的实例教程

  一款纯css3实现的颜色渐变按钮的代码教程

  一款纯css3实现的鼠标经过按钮特效教程

  利用css3实现的简单的鼠标悬停按钮

  纯CSS3发光分享按钮的实现教程