今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式，当鼠标经过的时候以动画的形式变成圆形。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<div><span></span></div>
css3代码：
body{background-color: #333;}div{width: 200px;height: 200px;margin: 0 auto;}span{position: relative;width: 180px;height: 180px;display: block;margin: auto;top: 25px;border: 20px solid rgba(255, 255, 0, .25);background-color: rgba(124,155,13,1);-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;transition: .5s;border-radius: 30px 0px 30px 0px;}span:before, span:after{position: absolute;display: block;background-color: #fff;border-radius: 10px;margin: auto;top: 0px;bottom: 0px;left: 0px;right: 0px;}span:before{width: 100px;height: 10px;content: "";}span:after{width: 10px;height: 100px;content: "";}div:hover span{-webkit-transform: scale(.5) rotate(45deg);-moz-transform: scale(.5) rotate(45deg);-ms-transform: scale(.5) rotate(45deg);transform: scale(.5) rotate(45deg);border-radius: 110px;background-color: rgba(112,18,255,1);}
via:http://***/Article/13275
