今天再给大家带来一款纯css3实现的鼠标经过按钮特效。这款按钮非常简单，但效果很好，非常漂亮。一起看下效果图：

　　实现的代码。

　　html代码：

XML/HTML Code 复制内容到剪贴板 <div align="center">           < div   class = "contener" >                < div   class = "txt_button" >                   WIFEO </ div >                < div   class = "circle" >                     </ div >            </ div >        </ div >   

　　css3代码：

CSS Code 复制内容到剪贴板 .contener    {       width :  300px ;       height :  60px ;       background-color :  #00bcd4 ;       line-height :  60px ;       color :  #ffffff ;       font-weight : 300;       font-family :  'Roboto' ;       font-size :  25px ;       position :  relative ;       overflow :  hidden ;       cursor :  pointer ;      box-shadow: 1px   1px   1px   #333333 ;    }    .txt_button    {       position :  absolute ;       width : 100%;    }    .contener:hover . circle    {      -webkit-animation:oblik 0.4s ease-in;      -webkit-transform-origin: 50% 50%;      -moz-animation:oblik 0.4s ease-in;      -moz-transform-origin: 50% 50%;      -ms-animation:oblik 0.4s ease-in;      -ms-transform-origin: 50% 50%;      animation:oblik 0.4s ease-in;      transform-origin: 50% 50%;       width :  100px ;       height :  100px ;       border -radius: 50%;     }    @-webkit-keyframes oblik {      0% {opacity:1;-webkit-transform:scale(0);}      100% {opacity:0;-webkit-transform:scale(5); background-color :  #006064 ;}       }    @-moz-keyframes oblik {      0% {opacity:1;-moz-transform:scale(0);}      100% {opacity:0;-moz-transform:scale(5); background-color :  #006064 ;}       }    @-ms-keyframes oblik {      0% {opacity:1;-ms-transform:scale(0);}      100% {opacity:0;-ms-transform:scale(5); background-color :  #006064 ;}       }    @keyframes oblik {      0% {opacity:1;transform:scale(0);}      100% {opacity:0;transform:scale(5); background-color :  #006064 ;}       }  

　　以上就是今天带给大家的一款纯css3实现的鼠标经过按钮特效，谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。