CSS：提交按鈕 - 不同的寬度，漸變，圓角 - 沒有CSS3

Question

我有提交按鈕，其寬度可能會有所不同，它具有漸變圓角。我在考慮是否有任何使用CSS3或JS編寫html + css的最佳做法而不使用。 我想對structe像：

<input type='submit' class='buttonLeft' value='Send!' /> 
    <span class='buttonRight'></span> 

和css：

.buttonLeft{ 
     float: left; 
     background: url('button.png'); 
} 

.buttonRight{ 
     width: 20px; 
     background: url('button.png') scroll 100% 0%; 
} 

視覺部分會就好了 - 寬度將進行調整，這將很好地被顯示出來。唯一的問題是「span」不可點擊 - 所以我將無法點擊按鈕的最後一個右側部分。我在想，如果沒有這個缺陷有什麼解決方案？我知道JS解決方案（包括IE中的CS3 CS3），但我想避免它。任何想法如何使用純CSS來做到這一點？

Answer 1

包圍按鈕周圍的跨度。在範圍內，將背景設置爲按鈕的右側條子（僅適用於需要容納任何圓角的寬度）。

看看它是如何完成這個網站：http://urbanairship.com/。

雖然這些按鈕中的大多數都是錨點，但它對於提交按鈕的作用相同。