Кнопка с фоном градиент и изображение с использованием html и css

Question

Я пытаюсь получить кнопку с градиентом фона и изображения. Это то, что я до сих пор:

jsfiddle/D6xKD/

Если вы посмотрите на эту кнопку вы можете увидеть, что градиент только работает по всему изображению, а не по всей кнопке.

Примечание: Это решение я получил из других ссылок о кнопке с градиентным фоном и фоновым изображением.

Мой вопрос: как получить градиент и изображение для кросс-браузеров, включая ie7 и выше?

HTML:

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 */ 
    } 

Спасибо заранее.

Answer 1

могли бы попробовать:

 <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

Этого стиль толкая градиент над:

background-position: 66px 4px; 

Если вы удалите его, градиентные заливки кнопки.

http://jsfiddle.net/D6xKD/9/

Если вам нужно яблоко, чтобы быть в определенном положении, я бы рекомендовал расширить холст вашего изображения, чтобы помочь в его размещении.

Answer 3

на основе @ Simon-Davies ответить

вы также можете ommit элемент "Пролет":

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