html - 不透明度のある背景 :before および :after アンカー

Question

<a/>タグをボタンとしてスタイルしたいと思います。背景は 3 つの部分にカットされています。

[before][text][after] 

問題 1:

[before]との背景[after]が重なって[text]います。[before]/の不透明度が[after]100% でな​​い場合、または背景画像に透明なピクセルがある場合、 の背景[text]が表示されます。そのため、アンカーの外にそれらが必要です。

問題 2:

3 つの要素すべてをフロートしますが、通常どおり他のタグを続行するには、フローティングをクリアする必要があります。

これがフィドルです：http://jsfiddle.net/WdUdy/

HTML:

<a href="" class="button">I'm a button</a>

CSS:

a.button {
    display: inline-block;
    line-height: 38px;
    padding: 5px;
    background: #616161;
    color: #E0E0E0;
    font-family: Verdana;
    float: left;    
}

a.button:before {
    content: "";
    background-color: #A50063;
    opacity: 0.5;
    display: block;
    width: 20px;
    height: 40px;
    float: left;    
}

a.button:after {
    content: "";
    background-color: #A50063;
    opacity: 0.5;
    display: block;
    width: 20px;
    height: 40px;
    float: right;
}

コード スニペット、チュートリアル、またはその他のヘルプをいただければ幸いです。前もって感謝します！