CCS3製作時尚美觀的漸變按鈕

上文介紹了CSS漸變的跨瀏覽器實現，本文將介紹CSS漸變的實際應用，點擊查看一系列純CSS製作的漸變按鈕。這些按鈕都是根據字體大小可伸縮的，可以通過改變padding和font-size來調整按鈕大小。這種方法最大的好處是可以應用到任何HTML元素，如div、span、p、a、button、input等。

CSS3漸變、陰影按鈕

這些按鈕的特別之處

• 純CSS:沒有圖片和Javascript
• 漸變跨瀏覽器支持(IE, Firefox 3.6, Chrome, and Safari)
• 三種按鈕狀態：正常，懸停，激活
• 可以應用在任何HTML元素：a、input、button、span、div、p、h3,等等
• 預留退路：如果用戶代理不支持CSS 3，則顯示沒有漸變和陰影的普通按鈕

不同瀏覽器下預覽

下面的圖片展示了按鈕在不同瀏覽器中的顯示效果。

CSS3按鈕在不同瀏覽器下的顯示效果

按鈕狀態

• 正常狀態：有邊框的漸變和陰影
• 鼠標懸停：比較暗的漸變
• 鼠標按下：翻轉漸變，1xp下沉，更深的字體顏色

CSS3按鈕狀態

按鈕樣式

下面的代碼是.button類的一般樣式，padding和border-radius使用em單位，可以使按鈕根據font-size伸縮。要調整按鈕大小，改變border-radius、font-size、padding值即可。例如：可以痛縮小字號（font-size）和內邊距（padding）創建稍小的按鈕（查看演示）。

關於border-radius、text-shadow、box-shadow更多詳情，請查看CSS 3 基礎。

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}

CCS3按鈕通用樣式

漸變色樣式

下面是橙色按鈕的樣式代碼。第一個背景設置是爲不支持CSS 3的瀏覽器預留的退路，第二個針對Webkit瀏覽器，第三個針對Firefox，最後一個是僅能被IE識別的漸變濾鏡。

關於CSS漸變的更多詳情，請查看CSS漸變跨瀏覽器實現一文。

.orange {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

 

CSS按鈕顏色樣式

直接使用演示中的按鈕

假設你想在你的網頁中使用藍色的按鈕：

• 首先，查看演示頁面源代碼，拷貝.button、.blue樣式；
• 然後，在想使用按鈕的元素上添加class="button blue"，CSS類可以應用於任何元素。