簡單實用的純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);