一个扁平化的div按钮

准备给博客加一个打赏按钮，于是就做了个这样的按钮，不是很好看。本来打算使用css3动画的，搞了好久都没解决兼容性问题，索性不搞了，勉强先用着，以后再改吧。

按钮如下图：

代码狗扁平化打赏div按钮

css代码如下：

<style>.ui-anim{width: 80px; height: 80px; line-height: 80px; margin: 0 auto 10px; text-align: center; background-color: #FFD700; cursor: pointer; color: #fff; border-radius: 50%;}.ui-anim:hover {background: #ffffff;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FF0000));background: -moz-linear-gradient(top,  #FF0000,  #FF0000);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#FF0000');}.layui-anim:active {color: #ffffff;background: -webkit-gradient(linear, left top, left bottom, from(#FFD700), to(#FFD700));background: -moz-linear-gradient(top,  #FFD700,  #FFD700);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFD700', endColorstr='#FFD700');}</style>

html代码如下：

 <div class="ui-anim" ><a style="font-size:36px;">赏 </a></div>

具体效果请看本站文章末尾的打赏按钮。