Button with background gradient and image using html and css - html

Question

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 1

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

Answer 2

Based on #simon-davies answer
you also can ommit the "span" element :
.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 */
}
:before {
content : "";
position: absolute;
top: 17px;
left: 100px;
width: 20px;
height: 24px;
background: url(your_image_url) no-repeat;
}
}

Answer 3

This style is pushing the gradient over:
background-position: 66px 4px;
If you remove it, the gradient fills the button.
http://jsfiddle.net/D6xKD/9/
If you need the apple to be in a certain position, I'd recommend expanding the canvas of your image to help in its placement.