css图像按钮

我想做一个基本的背景图像按钮，随着文本的增加而扩展。该按钮可以很好地展开，但该按钮的左右端图像不可点击。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; 
}

css image button

来源

2013-09-25 Muhammad

什么你，你拥有的是伪装成一个按钮链接..可点击区域将只文本 – MarsOne

可能的重复[点击任何地方在div而不是直接在链接]（http://stackoverflow.com/questions/8524470/click-anywhere-on-div-instead-of-直接在链接上）有趣的是，我刚刚回答了一个几乎相同的问题。使链接变为一个按钮 – mplungjan

使用HTML5，可以在链接中包含块级元素（如div），将div放入链接中，然后相应地设置div的样式。所以你的完整按钮变得可点击 – MarsOne

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

Demo

来源

2013-09-25 13:13:30 Prisoner

首先，我可以有任何定制设计按钮可扩展工作，其次我只是担心支持的浏览器的CSS – Muhammad

回答

相关问题