今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式，当鼠标经过的时候以动画的形式变成圆形。效果图如下：

实现的代码。

html代码：

复制内容到剪贴板 <div> <span></span> </div>

css3代码：

CSS Code复制内容到剪贴板 body { background-color:#333; } div { width:200px; height:200px; margin:0auto; } span { position:relative; width:180px; height:180px; display:block; margin:auto; top:25px; border:20pxsolidrgba(255,255,0,.25); background-color:rgba(124,155,13,1); -webkit-transition:.5s; -moz-transition:.5s; -ms-transition:.5s; transition:.5s; border-radius:30px0px30px0px; } span:before,span:after { position:absolute; display:block; background-color:#fff; border-radius:10px; margin:auto; top:0px; bottombottom:0px; left:0px; rightright:0px; } span:before { width:100px; height:10px; content:""; } span:after { width:10px; height:100px; content:""; } div:hoverspan { -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); }