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

Answer 1

为什么不直接在 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;
}

演示