什么都分享
以及,记录自己的故事
正在载入当前位置天气信息……

点赞按钮-CSS按钮设计代码下载(自设计2)

范例

128

字体使用的font-awesome,这是一个简单的点赞按钮,使用css来控制鼠标指针、悬停动画、字体图标动画等。


代码区

css

<style type="text/css">
.ex_btn{width:60px;height:25px;background-color:#FFFFFF;display:table;border-radius:4px;border:1px solid #f08080;box-shadow:1px 1px 1px #aaaaaa;}
.ex_btn_icon{float:left;margin-left:4px;position:relative;}
.ex_btn_icon i{color:#f08080;text-align:center;}
.ex_btn_number{cursor:pointer;width:35px;float:right;border-left:1px solid #f08080;position:relative;transition:0.3s;-webkit-transition:0.3s;}
.ex_btn_number:hover{background-color:#f08080;transition:0.3s;-webkit-transition:0.3s;}
.ex_btn_number:hover span{color:#ffffff;}
.ex_btn_number span{margin-left:4px;color:#f08080;}
</style>

html

<div class="ex_btn">
<div class="ex_btn_icon"><i class="fa fa-heart"></i></div>
<div class="ex_btn_number"><span>128</span></div>
</div>
打赏
本文遵守创作共享 BY-NC-ND 4.0协议,转载前请先联系作者。绯末博客 » 点赞按钮-CSS按钮设计代码下载(自设计2)
分享到: 更多 (0)

评论 抢沙发

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏