Home > DeveloperSection > Forums > css Image Button
Jayden Bell
Jayden Bell

Total Post:105

Points:739
Posted on    September-25-2013 7:46 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 1133  View(s)
Rate this:

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. color:#06C;

text-align:center;

text-decoration:none;

display:block;

margin:0; padding:15px 20px 22px;

}

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

}



Pravesh Singh

Total Post:411

Points:2881
Posted on    September-25-2013 9:54 AM

Hi Jayden,
You can use this:

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

}


Don't want to miss updates? Please click the below button!

Follow MindStick