title: How to change an input button image using CSS
body: <p>So, I can create an input button with an image using</p>
  <pre><code>&lt;INPUT type=&quot;image&quot; src=&quot;/images/Btn.PNG&quot; value=&quot;&quot;&gt;
  </code></pre>
  <p>But, I can't get the same behavior using CSS. For instance, I've tried</p>
  <pre><code>&lt;INPUT type=&quot;image&quot; class=&quot;myButton&quot; value=&quot;&quot;&gt;
  </code></pre>
  <p>where &quot;myButton&quot; is defined in the CSS file as</p>
  <pre><code>.myButton {
      background:url(/images/Btn.PNG) no-repeat;
      cursor:pointer;
      width: 200px;
      height: 100px;
      border: none;
  }
  </code></pre>
  <p>If that's all I wanted to do, I could use the original style, but I want to change the button's appearance on hover (using a <code>myButton:hover</code> class). I know the links are good, because I've been able to load them for a background image for other parts of the page (just as a check). I found examples on the web of how to do it using JavaScript, but I'm looking for a CSS solution.</p>
  <p>I'm using Firefox 3.0.3 if that makes a difference.</p>