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

下载按钮-CSS按钮设计代码下载(自设计5)

范例

下载地址

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


代码区

css

<style type="text/css">
.famio_download{
background:#1e90ff;
width:150px;
height:40px;
display:table;
border-style:solid;
border-color:black;
border-width:1px 1px 1px 1px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
box-shadow:0px 1px 1px #bbbbbb;
}
.famio_download_fa{
float:left;
text-align:center;
line-height:30px;
padding:6px 13px 0 15px;
color:#FFFFFF;
}
.famio_download_text{
cursor:pointer;
float:right;
text-align:center;
line-height:40px;
color:#FFFFFF;
border-left-style:solid;
border-left-color:black;
border-left-width:1px;
padding:0 13px 0 13px;
transition:0.3s;
}
.famio_download_text:hover{
background:#0072E1;
transition:0.3s;
}

html

<div class="famio_download">
<div class="famio_download_fa"><i class="fa fa-cloud-download fa-2x"></i></div><div class="famio_download_text"> 下载地址</div>
</div>
打赏
本文遵守创作共享 BY-NC-ND 4.0协议,转载前请先联系作者。绯末博客 » 下载按钮-CSS按钮设计代码下载(自设计5)
分享到: 更多 (0)

评论 抢沙发

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

支付宝扫一扫打赏

微信扫一扫打赏