简单实用的纯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);