CSS：提交按钮 - 改变宽度，渐变，圆角 - 没有CSS3

Question

我有提交按钮，宽度可能会有所不同，并且它有渐变圆角。我在想是否有任何编写html + css的最佳实践没有使用CSS3或JS。  我正在考虑结构：

  <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中用于CSS3的CSSPie），但我想避免它。任何想法如何使用纯css来做到这一点？

Answer 1

围绕按钮包裹跨度。在跨度中，将背景设置为按钮的右侧条（仅适用于您需要的宽度以容纳任何圆角）。

请参阅如何在此站点上完成：{{3 }}。

虽然这些按钮中的大多数都是锚点，但它对提交按钮的作用相同。