本文為翻譯文章，全文地址：http://diger.cn/article.asp?id=351
原文地址：http://www.filamentgroup.com/lab/buttonElement/
Particle Tree 最近發(fā)布了一篇文章描述了一種他們拿出的設(shè)計按鈕元素的技術(shù)，對于那些不熟練的人來說，表格按鍵是出了名的難以定制。典型的解決方案是使用瀏覽器提供的默認按鈕，或者是使用一個圖形輸入。當圖形輸入完成了需求結(jié)果時，它請求創(chuàng)建一個新的圖形為每一個按鈕用它的文本“Baked-in”（沒有提及以hovers交換它）。
盡管Particle Tree的技術(shù)提供了一種可靠的方案，它不能滿足我們的需求。我們需要一種使用了滑動門技術(shù)的按鈕，一種真正的HTML文本，不需要請求JavaScript轉(zhuǎn)滾或者提交表格。滿足這些條件就意味著input和anchor元素被排除了。很顯然,按鈕元素正是我們唯一的選擇。下面的技術(shù)示范了一種使用滑動門技術(shù)的跨瀏覽器的按鈕的技術(shù)。
查看Demo
標簽：
復制代碼 代碼如下:
button value="submit" class="submitBtn">span>Submit/span>/button>
CSS：
程序代碼
復制代碼 代碼如下:
button {
border:0;
cursor:pointer;
font-weight:bold;
padding:0 20px 0 0;
text-align:center;
}
button span {
position:relative;
display:block;
white-space:nowrap;
padding:0 0 0 20px;
}
/*blue buttons*/
button.submitBtn {
background:url(images/btn_blue_right.gif) right no-repeat;
font-size:1.3em;
}
button.submitBtn span {
height:50px;
line-height:50px;
background:url(images/btn_blue_left.gif) left no-repeat;
color:#fff;
}
button.submitBtn:hover {
background:url(images/btn_blue_right_hover.gif) right no-repeat;
}
button.submitBtn:hover span {
background:url(images/btn_blue_left_hover.gif) left no-repeat;
}
CSS For IE6和IE7（有時候需要）
復制代碼 代碼如下:
button {
width:auto;
overflow:visible;
}
button span {
margin-top:1px;
}
就像你能看到的那樣，每個狀態(tài)使用了2個圖片（總共4個圖片）。進一步簡化，可以將這些狀態(tài)轉(zhuǎn)化為兩個。但這種想法的最初測試出現(xiàn)了不一致的結(jié)果。
瀏覽器支持：
IE6，IE7，F(xiàn)irefox(mac/pc)，Safari，Opera，Camino等等。
警告：為了使hover在IE6中有效，你將需要編寫一個類觸發(fā)器。盡管不像圖片交換一樣糟糕。
