如今 Web Application 橫行，在 Web 2.0
網站的各種設計元素中，按鈕是無法或缺的。如何用最簡潔的方法制作最漂亮的按鈕就成為了一個問題。本文講述的方法，代碼上簡潔，符合 XHTML
標準，不需要 Javascript，只需要純 CSS 即可完成，而且通用性很好，使用起來也很方便。上圖即為最終成品的例子，您也可以通過演示頁面體驗一下。下面我將詳述整個制作過程，相信通過這個教程您肯定可以學會。
第一步：準備圖片
對于一個好的 UI，一個很重要的方面就是要能及時的與用戶發生交互。對于按鈕來說，我們需要讓按鈕相應各種鼠標事件，讓用戶知道它是可以按下的。如上圖，我們要制作的按鈕共有三種狀態：正常狀態、鼠標劃過、鼠標按下。通常情況下，我們會想到利用 onclick、onmouseover 這樣的事件來控制，而事實上，我們完全可以利用通用性、便捷性更好的 CSS 代替 Javascript 來完成這個過程。盡可能將表現的事情交給 CSS 來做，這也是良好設計的原則之一。
為了能夠實現這種效果，我們需要準備三個狀態的圖片。利用 CSS 的 background-position 屬性，我們完全可以將三種狀態的圖片放在一張圖片中，這樣可以獲得更好的緩存效果。
此外，按鈕兩側的圓角也是比較煩人的問題。因為我們要制作的按鈕需要能夠自動適應內部文字的長度，因此我們需要應用一種叫做“拉門技術 (Sliding door technique)”的 CSS 技巧。具體原理不講了，這里只介紹具體做法：
我們使用超鏈接來生成按鈕，為了使用 Sliding door technique，我們需要按照如下方式書寫 HTML 代碼：
-
<
a
class
=
"
button
"
href
=
"
http://some_where
"
><
span
>
Button Text
</
span
></
a
>
隨后，我們需要準備兩張圖片，作為按鈕的背景（分別為 span 標簽和 a 標簽的），具體示意圖如下：
這里需要指出，280px 并不是絕對的，它代表了這個按鈕在您的應用中可能用到的最大值。此外，所有的值都可以根據您實際的背景圖做出更改。
第二步：書寫 CSS 代碼
為了能夠讓 A 標簽準確的顯示我們需要的效果，我們需要設定其 display 屬性為
block，但是，很多情況下，我們需要在同一行中顯示多個按鈕，我們可以通過設定 float:left 或 float:right
來達到。提醒一下，這樣設定後，當您放置完按鈕后不要忘記 clear 一下 :)。
首先看看顯示基本布局的代碼，本例中，兩側圓角部分為 10px，按鈕高度為 24px，保留區域為 1px：
-
a.button
{
-
? ? ?
background:
?
transparent
url(a.gif)
no-repeat
scroll
right
top
;
-
? ? ?
color:
?
White
;
-
? ? ?
display:
?
block
;
-
? ? ?
float:
?
left
;
-
? ? ?
height:
?
24
px
;
-
? ? ?
padding-right:
?
10
px
;
-
? ? ?
font:
?
normal
12
px
sans-serif
;
-
? ? ?
margin-right:
?
10
px
;
-
? ? ?
text-decoration:
?
none
;
-
? ?
}
-
? ?
a.button
?
span
{
-
? ? ?
background:
?
transparent
url(span.gif)
no-repeat
;
-
? ? ?
display:
?
block
;
-
? ? ?
padding:
?
5
px
1
px
5
px
11
px
;
-
? ? ?
line-height:
?
14
px
;
-
? ?
}
這里需要指出的是：1. 保留區 (1px) 是包含在 SPAN 中的，具體可以注意看 padding 的設置；2. SPAN 的 line-height + padding-top + padding-bottom = A 的 height。
經過這樣設定后，我們的按鈕的基本樣式就完成了，但它還沒有交互效果，我們通過設定 a:hover 和 a:active 來實現：
-
a.button
:hover
{
-
? ? ?
background-position:
?
right
-
24
px
;
-
? ?
}
-
? ?
a.button
:hover
?
span
{
-
? ? ?
background-position:
?
left
-
24
px
;
-
? ?
}
-
? ?
a.button
:active
?
{
-
? ? ?
background-position:
?
right
-
48
px
;
-
? ?
}
-
? ?
a.button
:active
?
span
{
-
? ? ?
background-position:
?
left
-
48
px
;
-
? ? ?
padding:
?
6
px
0
4
px
12
px
;
-
? ?
}
我們看到，主要是應用了 background-position 屬性調整背景圖片的位置，這比使用多張圖片效果更好。在 a.button:active span 中，我們重新設定了 padding 的值，使字符向右下方移動 1px，按下的效果更明顯，這也是之前提到的保留區的作用。
第三部：最后完善
其實做完上面兩部，我們的按鈕基本上已經完工了。但是在各種瀏覽器中都有一個討厭的問題，就是當超鏈接被點擊后，會留下一個討厭的虛線框。這個破壞美觀的東西，我們當然要干掉它。
Firefox、Safari 等支持 W3C CSS2 的瀏覽器，可以通過設定 CSS 的 outline 屬性來做到這一點。在我們這個例子中，只需做如下改動：
-
a.button
:active
{
-
? ? ?
background-position:
?
right
-
48
px
;
-
? ? ?
outline:
?
none
;
-
? ?
}
在 Firefox 中看看，虛框已經消失了。
但 Internet Explore 不吃這一套，對付它就比較麻煩了，單單 CSS 無法解決問題，需要從 HTML 下手。我們需要將按鈕的 HTML 代碼改為以下形式：
-
<
a
class
=
"
button
"
href
=
"
http://some_where
"
onclick
=
"
this.blur();
"
><
span
>
Button Text
</
span
></
a
>
這樣，我們可以讓超鏈接在點擊后迅速失去焦點，從而避免虛框的出現。當然，如果我們應用中按鈕比較少，這個方法還不錯。但按鈕比較多的情況下，我們
還是應該用 DOM 方法來為 className 為 button 的 A 修改 onclick 事件（用 jQuery 或
Prototype 實現會很省心），不過這不在本文討論的范圍內了。
到這里，我們的按鈕就算做好了，我相信您一定已經學會了。如果還有什么不明白的地方，您可以參考這個簡單的范例，查看它的源代碼來解決。當然，您也可以直接在本文後提問，我很樂意為您解答。
UPDATE:謝謝 Dan Li 發來郵件提醒，我確實發現本文與這篇文章如
出一轍。早看到直接轉過來就好了，白白折騰了兩個小時。不知道留言中 DV
大俠所指的是不是這篇。不過我在寫本文時并沒有看過這篇文章，而且本文與原文還是有很大不同，而且原文中 CSS 有誤
(background-position 的參數順序不對)，雖然可以實現它所敘述的效果，但不符合 CSS
標準，也不能夠進一步擴展，希望看了原文的朋友能夠注意。