讓網頁內文有按鈕效果的css

下面的css可以讓網頁內文有按鈕的效果。

span.btn{
    background-image: linear-gradient(bottom, #ddd 50%, #eee 50%);
    background-image: -o-linear-gradient(bottom, #ddd 50%, #eee 50%);
    background-image: -moz-linear-gradient(bottom, #ddd 50%, #eee 50%);
    background-image: -webkit-linear-gradient(bottom, #ddd 50%, #eee 50%);
    /*上面為使按鈕有上下兩種顏色的效果*/
    background-color:#eeeeee; /*若瀏覽器不支援上面的效果所使用的按鈕顏色*/
    margin: 0 .2em; /*控制與左右兩邊文字的間隔*/
    padding: .2em .8em; /*控制按鈕大小*/
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; /*按鈕文字字型*/
    font-size: 12px; /*按鈕文字大小*/
    line-height: 1.4;
    color: #333; /*按鈕文字顏色*/
    text-shadow: 0 1px 0 #FFF;
    border: 1px solid #888; /*按鈕邊框顏色*/
    border-radius: 2px; /*按鈕圓角效果*/
    white-space: nowrap; /*確保按鈕文字不會斷行*/
}

使用範例如下

<p>這是一般內文，這是<span class="btn">按鈕</span>。</p>

這是一般內文，這是按鈕。

菜鳥工程師肉豬-版權所有不得轉載