title: Add padding to button text in CSS to let background image appear
body: <p>I have add an asp button to my aspx page. Using CSS I added a background image as follows: </p>
  
  <pre><code> .newbutton {
           background: url(../Images/add4.png);
            background-repeat:no-repeat;
          background-size:18px 18px;
          border-radius: 5px;
           padding: 5em 10em 5em 25em;
          }
  </code></pre>
  
  <p>The aspx button: </p>
  
  <pre><code> &lt;asp:Button ID="BtnNewRecord" runat="server" Text="New Record"  CssClass="newbutton" &gt;
  </code></pre>
  
  <p>The problem is that the button text overrides the background image. I used padding as in CSS above but it doesn't do any change. 
  You can find the button image in the snippet below. 
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="http://tinypic.com?ref=20jka4y" target="_blank"&gt;&lt;img src="http://i57.tinypic.com/20jka4y.jpg" border="0" alt="Image and video hosting by TinyPic"&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>EDIT:</p>
  
  <p>HTML Markup for button: </p>
  
  <pre><code>  &lt;input type="submit" name="ctl00$MainContent$BtnNewRecord" value="New Record"  id="MainContent_BtnNewRecord" class="newbutton" /&gt;
  </code></pre>
  
  <p>EDIT #2: </p>
  
  <p>I found this in Site.css :</p>
  
  <pre><code> input[type="submit"],
  input[type="button"],
  button {
      background-color: #d3dce0;
      border: 1px solid #787878;
      cursor: pointer;
      font-size: 1.2em;
      font-weight: 600;
      padding: 7px;
      margin-right: 8px;
      width: auto;
  }
  </code></pre>
  
  <p>Could this be conflicting with my .newbutton style ? If so how can i remove this conflict ?</p>
  
  <p>EDIT 3: </p>
  
  <p>I tried all the solutions in the comment and the answers below, but it seems that problem is with "width: auto" in the ".button" css in Site.css. When i comment this line, the changes are taking effect, but it also messes up every other button width in my web application. 
  Any Ideas how i can override the width in my ".newbutton" style? </p>