当前位置:代码狗 > 开发教程 > WEB开发教程 > 正文

一个扁平化的div按钮

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

按钮如下图:

代码狗扁平化打赏div按钮

代码狗扁平化打赏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>

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

感觉很棒!可以赞赏支持我哟~

赞(11) 打赏

评论 1

  1. #1

    我也来试试看,谢谢楼主

×

请作者吃根烤肠!

支付宝