在许多网站中都需要实用到按钮，一个好看实用的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代码

     
      Button
     

其他几种按钮

背景颜色

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

背景颜色

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

背景颜色

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