今天再给大家带来一款纯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实现的鼠标经过按钮特效，谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。
