html - css イメージ ボタン

Question

テキストが増えると拡大する基本的な背景画像ボタンを作成しようとしています。ボタンは正常に拡張されますが、このボタンの左端と右端の画像はクリックできません。

<div class="store_button">
    <div class="dd"></div>
        <a href="#">My Button</a>
    <div class="ee"></div>
</div>

.bottom .store_button
{
margin:0 auto;
text-align:center;
display:inline-block;
}

.store_button .dd
{
width:15px; height:62px;
background:url(../images/store_buttons_left.gif) no-repeat left;
float:left;
}
.store_button .ee
{
width:15px; height:62px;
background:url(../images/store_buttons_right.gif) no-repeat right;
float:left;
}

.store_button a
{
background:url(../images/store_buttons_mid.gif) repeat-x;
float:left;
text-transform:none;
font-weight:bold;
font-size:20px;
color:#06C;
text-align:center;
text-decoration:none;
display:block;
margin:0; padding:15px 20px 22px;
}