html - 3 つの背景画像 css を使用したボタン

Question

ボタンのテキストを翻訳して適切に拡張できるように、3 つの背景画像を使用してボタンを作成しようとしています。おそらく IE8 の基本スタイルを追加する予定ですが、デザイナーはこのスタイルを使用することを望んでおり、純粋な CSS3 ではうまく再現できませんでした。

画像は次のとおりです。

これがHTMLです（単純なボタンですが、とにかく配置する必要があると思いました：

<button class="back clickable" aria-label="Back" onclick="javascript:history.back();">Back</button>

私はすでにいくつかのことを試しました。両方の試行の CSS を貼り付けます。

試行 1: 疑似セレクターの使用
http://jsfiddle.net/c2B6X/

.back {
    background: url("images/back-middle.png") 14px 0 repeat-x;
    color: $white;
    height: 28px;
    padding: 5px;
    &:before {
        background: url("images/back-front.png") 0 0 no-repeat;
        width: 14px;
    }
    &:after {
        background: url("images/back-end.png") 100% 0 no-repeat;
        width: 8px;
    }
}

試行 2: 3 つbackground-imageの
http://jsfiddle.net/nPUQN/

.back {
    background: none;
    background-image: url("images/back-middle.png"), url("images/back-end.png"), url("images/back-front.png");
    background-position: 14px 0, 100% 0, 0 0;
    background-repeat: repeat-x, no-repeat, no-repeat;
    border-right: 8px transparent;
    border-left: 14px transparent;
    color: $white;
    height: 28px;
    padding: 5px;

}

通常とは異なる CSS のように見える場合は、SASS を使用しているためです。

私が行方不明または間違っていることは明らかですか？この作業を行う方法についてのアドバイスは大歓迎です。

編集
「うまくいく」という非常に多くの回答を得たので、Chrome、FF、およびIE9で最もうまく機能する回答を正しいとマークします。

EDIT 2
私はすべての答えを試しましたが、IE9では何も機能しません。私たちは IE9 (および IE8 をサポートする必要がありますが、今のところそこには行きません)。懸賞金始めます。IE9、Firefox、および Chrome で機能する回答を提供できる人なら誰でも取得できます。