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

圆形按钮-CSS按钮设计代码下载(自设计3)

范例

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


代码区

css

<style type="text/css">
.ex_btn_c{
cursor:pointer;
background:#48d1cc;
width:30px;
height:30px;
border-radius:15px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px -3px 0px #000000 inset;
-webkit-box-shadow:0px -3px 0px #000000 inset;
-moz-box-shadow:0px -3px 0px #000000 inset;
}
.ex_btn_c:active{
background:#34BDB8;
box-shadow:0px 0px 0px #000000 inset;
-webkit-box-shadow:0px 0px 0px #000000 inset;
-moz-box-shadow:0px 0px 0px #000000 inset;
}
.ex_btn_c i{
line-height:30px;
line-width:30px;
margin:0 9px 0 9px;
color:white;}
</style>

html

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

评论 抢沙发

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

支付宝扫一扫打赏

微信扫一扫打赏