提交按钮顶部的图像图标

Question

I am working on a submit button in Drupal. I use this HTMLcode generated from PHP:

<div class="buttons">
    <span class="icon">
        <input type="submit" name="op" id="edit-submit-115" value="Vložiť do košíka"  class="form-submit node-add-to-cart"" />
    </span>
</div>

I want the button to have gradient background which is done by adding some lines in CSS.

background: #F47C20;
background: -webkit-gradient(linear, left top, left bottom, from(#F88E11), to(#F06015));
background: -moz-linear-gradient(top, #F88E11, #F06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'

Now, I would like to place an image icon on TOP of the button, close to the text. I have been searching all day for some clues but couldn't find anything.

The page with the button can be found here .

Answer 1

Well, here are two other ideas:

1. You can use multiple backgrounds: http://tinkerbin.com/revBP8If

   Note that I had to remove the IE filter property because it was causing the rest of the CSS to fail on Tinkerbin. Unfortunately, multiple backgrounds aren't supported by IE8 or below.

2. A more compatible alternative is to use a regular a link instead of an input submit button. You can insert an img and style it to look like a button, but you'll need a bit of Javascript to submit the form: http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml