css Image Button

Question

I'm trying to make a basic background image button, which expands as text increases. The button expands fine but, the left and right end images of this button are not clickable.

<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

What you you have is a link disguised as a button.. The clickable area will only be the text — MarsOne, Sep 25 '13 at 13:09
possible duplicate of [Click anywhere on div instead of directly on Link](http://stackoverflow.com/questions/8524470/click-anywhere-on-div-instead-of-directly-on-link) What is interesting is that I just answered an almost identical question. Make the LINK a button instead — mplungjan, Sep 25 '13 at 13:10
With HTML5 it is possible to have a block level elements like divs inside a link, put your div inside the link then style the div accordingly. SO your full button becomes clickable — MarsOne, Sep 25 '13 at 13:10

score 3 · Answer 1 · answered Sep 25 '13 at 13:13

Why not just do it in 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

css Image Button

1 Answers1