title: Using CSS gradient with background image in buttons
body: <p>There is example below :</p>
  
  <pre><code>.btn
  {
   color:white;
   border:solid 1px navy;
   cursor:pointer;
   font-weight:bold;
   text-align:center;
   padding-left:26px;
   text-align:left;
   width:120px;
   height:25px;
   display:inline-block;
   background: -moz-linear-gradient(top,  #2c539e 0%, #2c539e 100%);
  }
  .btn:hover
  {
   background: -moz-linear-gradient(top,  #dff2fc 0%, #d7effc 48%, #bde4fa 80%, #abddf8 100%);
   border:1px solid #3C7FB1;
   color:Black;
  }
  </code></pre>
  
  <p>Now, how to put image too, but different image for each button?</p>
  
  <pre><code>&lt;input type="button" value="Save" class="btn" /&gt;&lt;br&gt; &lt;!-- there's need save.png --&gt;
  &lt;input type="button" value="Cancel" class="btn" /&gt; &lt;!-- there's need cancel.png --&gt;
  </code></pre>
  
  <p>I know for combining gradient with image goes like bellow code :</p>
  
  <pre><code>background: url(save.png) 5px center no-repeat, -moz-linear-gradient(top,  #2c539e 0%, #2c539e 100%);
  </code></pre>
  
  <p>But, how to use <code>btn</code> class and different image for each button?</p>
  
  <p><strong>EDIT :</strong>
  Well, I wasn't specific in my question (my bad)...
  In example, above, using <code>btn</code> class buttons are some dark blue gradient color, on hover they are some light blue gradient color.
  But, in any button I need, on left side different image, like icon.</p>
  
  <pre><code>+-----------+
  | X Save    |
  +-----------+
  </code></pre>
  
  <p>where X is image 16x16. That "icon" must be in the front of gradient background from css.</p>
  
  <p><strong>EDIT 2 :</strong>
  Or just to forget gradient background and use simple color? :-/</p>