今天给大家带来一款纯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 ;                 bottom bottom :  0px ;                 left :  0px ;                 right 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);            }