title: Turn Image into a Button Image: Remove borders
body: <p>I have this link with the following css.</p>
  
  <pre><code>    &lt;a href="step1.php"&gt;Buy Now&lt;/a&gt;
  
      //css
  
      #buy a {
      background:transparent url(signup_bt.gif) repeat scroll 0 0;
      color:#FFFFFF;
      display:block;
      font-size:14px;
      font-weight:bold;
      height:37px;
      line-height:38px;
      text-align:center;
      text-decoration:none;
      width:126px;
      }
  
  #buy a:hover{
  background:transparent url(signup_bt2.gif) repeat scroll left bottom;
  }
  </code></pre>
  
  <p>I now need to change it to a submit button to be used in a form and to look exactly like before. I did this:</p>
  
  <pre><code>&lt;input type="submit" value="Buy Now" /&gt;
  
  #buy input{
  color:#FFFFFF;
  font-size:14px;
  font-weight:bold;
  height:37px;
  line-height:38px;
  text-align:center;
  text-decoration:none;
  width:126px;
  background:transparent url(signup_bt.gif) repeat scroll 0 0;
  display:block;
  }
  
  #buy input:hover{
  background:transparent url(signup_bt2.gif) repeat scroll left bottom;
  }
  </code></pre>
  
  <p>It nearly worked but, its got a horrible border around it and on hover the button goes into the page. How can I fix this?</p>
  
  <p>How can I remove the border and how can I get the button to just swap images normally and not go into the page.</p>
  
  <p>Thanks all</p>