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

立体按钮-CSS按钮设计代码下载(自设计4)

范例

主页

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


代码区

css

<style type="text/css">
.ex_btn{
color:white;
font-size:14px;
cursor:pointer;
width:60px;
height:30px;
background:linear-gradient(top,#00ffff,#008b8b);
background:-o-linear-gradient(top,#00ffff,#008b8b);
background:-moz-linear-gradient(top,#00ffff,#008b8b);
background:-webkit-linear-gradient(top,#00ffff,#008b8b);
border-style:solid;
border-color:#333333;
border-width:1px 1px 3px 1px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
box-shadow:2px 2px 0px #dddddd;
-webkit-box-shadow:2px 2px 0px #dddddd;
-moz-box-shadow:2px 2px 0px #dddddd;
}
.ex_btn:active{
background:linear-gradient(top,#008b8b,#00ffff);
background:-o-linear-gradient(top,#008b8b,#00ffff);
background:-moz-linear-gradient(top,#008b8b,#00ffff);
background:-webkit-linear-gradient(top,#008b8b,#00ffff);
border-style:solid;
border-width:1px 1px 1px 1px;
box-shadow:0px 0px 0px #dddddd;
-webkit-box-shadow:0px 0px 0px #dddddd;
-moz-box-shadow:0px 0px 0px #dddddd;
}
.ex_btn i{
line-heght:30px;
margin:0 6px 0 6px;
}
</style>

html

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

评论 抢沙发

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

支付宝扫一扫打赏

微信扫一扫打赏