CodeMonk CodeMonk - 5 months ago 14
CSS Question

Button with background gradient and image using html and css

I am trying to get a button with gradient background and an image. This is what I have so far:

jsfiddle/D6xKD/

If you look at the button you can see that the gradient is only working around the image and not throughout the button.

Note: This solution I fetched from other references about a button with gradient background and background image.

My question is: How to get the gradient and image working for cross browsers including ie7 and above?

HTML:

<button class="button" onclick="submit();" type="button">Text button</button>


CSS:

.button{
color: #FFFFFF;
display: inline-block;
font-family:Arial;
font-size: 10px;
font-weight: normal;
padding: 9px 36px 9px 4px;
text-decoration: none;
margin:4px auto auto;
cursor:pointer;
border:0px;
background: #3ba93d;
background-position: 66px 4px;
background-repeat:no-repeat;
background-image: url(http://goo.gl/mw5HWR); /* fallback */
background-image: url(http://goo.gl/mw5HWR), -webkit-gradient(linear, left top, left bottom, from(#3ba93d), to(#27842a)); /* Saf4+, Chrome */
background-image: url(http://goo.gl/mw5HWR), -webkit-linear-gradient(top, #3ba93d, #27842a); /* Chrome 10+, Saf5.1+ */
background-image: url(http://goo.gl/mw5HWR), -moz-linear-gradient(top, #3ba93d, #27842a); /* FF3.6+ */
background-image: url(http://goo.gl/mw5HWR), -ms-linear-gradient(top, #3ba93d, #27842a); /* IE10 */
background-image: url(http://goo.gl/mw5HWR), -o-linear-gradient(top, #3ba93d, #27842a); /* Opera 11.10+ */
background-image: url(http://goo.gl/mw5HWR), linear-gradient(top, #3ba93d, #27842a); /* W3C */
}


Thanks in advance.

Answer

could try:

        <button class="button" onclick="submit();" type="button">Text button <span></span></button>

        <style>
        .button{
            color: #FFFFFF;
            font-family:Arial;
            font-size: 10px;
            font-weight: normal;
            padding: 0;
            padding-left: 20px;
            height: 36px;
            width: 120px;
            margin:4px auto auto;
            text-align: left;
            cursor:pointer; 
            border:0px;
            background: #3ba93d;
            background-position: 66px 4px;
            background-repeat:no-repeat;
            background: #3ba93d; /* fallback */
            background: -webkit-gradient(linear, left top, left bottom, from(#3ba93d), to(#27842a)); /* Saf4+, Chrome */
            background: -webkit-linear-gradient(top, #3ba93d, #27842a); /* Chrome 10+, Saf5.1+ */
            background: -moz-linear-gradient(top, #3ba93d, #27842a); /* FF3.6+ */
            background: -ms-linear-gradient(top, #3ba93d, #27842a); /* IE10 */
            background: -o-linear-gradient(top, #3ba93d, #27842a); /* Opera 11.10+ */
            background: linear-gradient(top, #3ba93d, #27842a); /* W3C */
            }
          .button span {
            position: absolute;
            top: 17px;
            left: 100px;
            width: 20px;
            height: 24px;
            background: url(http://goo.gl/mw5HWR);
          }
           </style>

JS Fiddle