一款纯css3实现的鼠标悬停动画按钮

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

　　实现的代码。

　　html代码：

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

　　css3代码：

CSS Code复制内容到剪贴板 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;                bottombottom: 0px;                left: 0px;                rightright: 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);            }  

动画 CSS