rocknbil - 5:02 pm on Dec 14, 2011 (gmt 0)

Nah you don't want to use input type="image". This presents all sorts of little problems . . . you can style the button as a background image, which allows you to use mouseover effects. Create a button image, let's say our standard size is 150 pixels, and the height of the button is 60 pixels. Create a 150 wide by 120 high image with the "normal" state on top, mouseover state on the bottom, like

NORMAL
-----------
MOUSEOVER

Then you'd do **something** like this.

<form method="post" id="myform" action="youraction.php">
<p>
<label for="myfield">Support Promo Code</label>
<input type="text" id="myfield" name="myfield" value="<?php echo $value; ?>">
</p>
<p><input type="submit" id="submitButton" value="Get Promo Code"></p>
</form>

The CSS:

#myform,#myform p, #myform input, #myform label {
display: block;
width: 150px;
margin: 4px 0;
padding:0;
}

#submitButton {
/* This is what allows you to use an image on the button
without the text. Just don't try to apply text-align:center. :-)
*/
text-indent:-50000px;
border:none;
outline:none;
height: 60px;
background:url(/images/submit-button.gif) top left no-repeat;
}

#submitButton:hover { background-position: bottom left; }

Note there's no reason to add "size", but you can - defaults to 25, I think. Add your /'s to the ends of input if you're using XHTML.