CSS IMAGE BUTTON

Jayden Bell

Total Post:110

Points:774
Posted by  Jayden Bell
 1529  View(s)
Ratings:
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;

}

  1. Pravesh Singh

    Post:412

    Points:2888
    Re: css Image Button

    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;

    }

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!