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

标准按钮-CSS按钮设计代码下载(自设计1)

范例

Setting

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


代码区

css

<style type="text/css">
.example_btn{width:100px;height:30px;display:table;border-radius:4px;background-color:#1e90ff;tansition:0.3s;-webkit-transition:0.3s;box-shadow:1px 1px 1px 1px #BBBBBB;}
.example_btn:hover{cursor:pointer;background-color:#0A7CDC;transition:0.3s;-webkit-transition:0.3s;}
.example_btn_content{color:#FFFFFF;text-align:center;font-size:15px;}
.example_btn_content i{line-height:30px;text-align:center;}
</style>

html

<div class="example_btn">
<div class="example_btn_content"><i class="fa fa-gear fa-1x fa-spin"></i> Setting</div>
</div>
打赏
本文遵守创作共享 BY-NC-ND 4.0协议,转载前请先联系作者。绯末博客 » 标准按钮-CSS按钮设计代码下载(自设计1)
分享到: 更多 (0)

评论 抢沙发

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

支付宝扫一扫打赏

微信扫一扫打赏