准备给博客加一个打赏按钮，于是就做了个这样的按钮，不是很好看。本来打算使用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>
具体效果请看本站文章末尾的打赏按钮。
评论 （1）