纯css3实现的鼠标悬停动画按钮_html/css

来源：舟格财经

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

在线预览源码下载

实现的代码。

html代码：

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); }