Html css图像按钮

我试图制作一个基本的背景图像按钮，它会随着文本的增加而扩展。按钮可以很好地展开，但此按钮的左端和右端图像不可单击

<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;
}

.bottom.store_按钮
{
保证金：0自动；
文本对齐：居中；
显示：内联块；
}
.store_按钮.dd
{
宽度：15px；高度：62px；
背景：url（../images/store\u buttons\u left.gif）无重复左键；
浮动：左；
}
.store_button.ee
{
宽度：15px；高度：62px；
背景：url（../images/store\u buttons\u right.gif）无重复权限；
浮动：左；
}
.存储按钮a
{
背景：url（../images/store_buttons_mid.gif）repeat-x；
浮动：左；
文本转换：无；
字体大小：粗体；
字体大小：20px；
颜色：#06C；
文本对齐：居中；
文字装饰：无；
显示：块；
边距：0；填充：15px 20px 22px；
}

---

为什么不在CSS中执行此操作：

<a href="">My Button</a>

a{
    border: 1px solid #ccc;
    padding: 20px 30px;
    display: inline-block;
    color: blue;
    text-decoration: none;
    -webkit-box-shadow: 0px 3px 7px #ccc;
    -moz-box-shadow: 0px 3px 7px #ccc;
    box-shadow: 0px 3px 7px #ccc;
}

a:active{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

a{
边框：1px实心#ccc；
填充：20px 30px；
显示：内联块；
颜色：蓝色；
文字装饰：无；
-网络工具包盒阴影：0px 3px 7px#ccc；
-moz盒阴影：0px 3px 7px#ccc；
盒影：0px 3px 7px#ccc；
}
a:主动的{
-webkit盒阴影：无；
-莫兹盒阴影：无；
盒影：无；
}

---

您拥有的是一个伪装成按钮的链接。。可点击区域将仅为文本。有趣的是，我刚刚回答了一个几乎相同的问题。使链接成为按钮而不是HTML5。在链接中可以有一个像div这样的块级元素，将div放在链接中，然后相应地设置div的样式。这样你的完整按钮就可以点击了