title: Form Button with custom image and text
body: <p>A form button has a 170x60 image for the non-pressed and pressed states. What I can't seem to do is get There to be text in the button. I really want to avoid having to edit the image and write text to it directly. Right now I'm using:</p>
  
  <pre><code>&lt;input type="image" src="img/button_normal.png"
   width="175" height="60" onmousedown="this.src='img/button_pressed2.png'"
   onmouseup="this.src='img/button_normal.png'"&gt; 
  </code></pre>
  
  <p>I figured that it is impossible to make this work with text on top of it (as far as I have tried). So then I tried using <code>&lt;button&gt;</code> but I couldn't get it to work either.</p>
  
  <p>I have been able to put text over the image above, but where the text is, the button is unclickable, which doesn't work.</p>
  
  <p>What is a solution to this problem?</p>