首页 > 代码库 > 简单实用的纯css按钮效果
简单实用的纯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);
简单实用的纯css按钮效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。