CODEWITHSUNDEEP
htmlcssbuttonbackground-image
Muhammad
Muhammad

Reputation: 425

css Image Button

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

Upvotes: 1

Views: 3329

Answers (1)

Prisoner
Prisoner

Reputation: 27618

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

Upvotes: 3

Related Questions