css Image Button

Total Post:110

Points:774
 1946  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. 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;
    }

      Modified On Mar-31-2018 02:01:04 AM

Answer