使用CSS3和RGBa創建超酷的按鈕

作者：Eve Cole 更新時間：2009-06-23 17:08:41

呃，看到這個標題，我們可以先將IE系瀏覽器無視了。

我承認，我是有極簡主義傾向的，我希望能夠使用最少的程式碼和圖片做更多的事情。

雖然CSS3只是增加了少數新特性，但是這些屬性可以做很多有用的事情，可以大大的簡化我們的工作。我們今天做的這些按鈕，就是充分利用CSS3的圓角、盒子陰影和文字陰影效果，同時使用RGBa色彩。

讓我們先來看看demo吧：

css超酷按鈕演示

我們可以透過四個步驟來做出這些漂亮的按鈕：

1.按鈕的基本設定

我們需要先設定一下按鈕的基本樣式，這裡我們使用a標籤，當然也可以使用input、button標籤等，這裡使用a標籤是因為這三個標籤中只有a標籤支援:hover偽類。

以下為引用的內容：

.btn {
display: inline-block;/*thanks to ytzong*/
/*display:block;
float:left;
margin:5px; */
padding: 4px 10px;
font:bold 13px/180% Tahoma, sans-serif;
color: #fff;
text-decoration: none;
overflow:hidden;
}

這裡多謝ytzong童鞋的建議，我們改為採用display:inline-block，這樣可以省去float和margin兩行程式碼。 ——神飛@05.31.2009

2.半透明的png漸層圖片

這是我們這裡唯一用到的圖片，這個透明的png圖片用來達到顏色的漸層。這個圖片我們可以稱之為單色透明度漸層。在CSS中，使用背景示範+這樣的png圖片就可以實現不同的色彩漸層效果。當然，這個不是CSS3的特性，除了IE6以下版本的瀏覽器，所有的瀏覽器都可以達到這樣的效果。你可以點擊這裡查看該png檔。

以下為引用的內容：

.btn {
……
background: #222 url(sprites.png) repeat-x;
/**background**/
}

3.圓角

圓角(border-radius)是目前瀏覽器支援最好的CSS3特性之一，除了IE系瀏覽器，各個A級瀏覽器都支持，儘管大都是透過私有屬性來實現的，至少，這是可用的。

以下為引用的內容：

.btn {
……
background: #222 url(sprites.png) repeat-x;
/**背景圖**/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/**圓角**/
}

4.陰影和RGBa

box-shadow和text-shadow是CSS3新增的兩個重要的屬性，它們可以很方便的實現區塊級元素陰影和文字的陰影。但是，如果如果陰影的顏色使用半透明效果，豈不是更好?這樣元素可以更好的和背景融合在一起。值得注意的是，FF只有等到3.5版本才支援text-shadow屬性(目前Firefox3.5beta4版本已經支援)。

以下為引用的內容：

 .btn {
 …
 background: #222 url(sprites.png) repeat-x;
 /**背景圖**/
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 /**圓角**/
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 /**按鈕陰影**/
 text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
 /**文字陰影**/
 }

好了，到現在，我們的按鈕已經完全做好了。它已經實現了我們的目標。

這個按鈕，是黑色的，那麼其它顏色的按鈕實現起來也就比較容易了：

以下為引用的內容：

……
.green.btn, .green.btn:visited {background-color: #91bd09;}
.green:hover {background-color: #749a02;}
.blue, .blue:visited {background-color: #2daebf;}
.blue:hover {background-color: #007d9a;}
.red, .red:visited {background-color: #e33100;}
.red:hover {background-color: #872300;}
……

請注意，這些樣式一定要放在.btn的後面。這樣這些綠色、藍色、紅色等顏色的按鈕的背景色才能重寫.btn的背景色。然後再使用

最後，讓我們來可憐一下IE瀏覽器吧，這些按鈕在IE7和IE8瀏覽器中會顯示直角、有漸變色、無陰影、無透明色，但是在IE6中，它將顯示淺藍色的背景，這是因為IE6不支援png透明所致，如果你想讓它在IE6中能夠像個按鈕，就用那些js後IE的濾鏡來處理吧。