简单实用的纯css按钮效果

在许多网站中都需要实用到按钮,一个好看实用的css按钮即可以给访问者以美感,又可以方便开发者。下面就是一个纯css按钮,需要的可以参考。

css代码

.div {
    display: inline-block;
    padding: .3em .5em;
    background-image: linear-gradient(#ddd, #bbb);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3em;
    box-shadow: 0 1px white inset;
    text-align: center;
    text-shadow: 0 1px 1px black;
    color:white;
    font-weight: bold;
}
.div:active{
    box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
    border-color: rgba(0,0,0,.3);
    background: #bbb;
}

html代码

<div class="div">Button</div>

其他几种按钮

背景颜色

background-image: linear-gradient(#f5c153, #ea920d);

背景颜色

 background-image: linear-gradient(#8eb349, #5f7c22);

背景颜色

background-image: linear-gradient(#fbb2d0, #e779aa);

 

转载于:https://www.cnblogs.com/shengliang74/p/6158508.html

发布了0 篇原创文章 · 获赞 6 · 访问量 4万+
展开阅读全文
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览