In this week’s tutorial we take a look at how you can replace the standard HTML submit button with an image. Although you can style submit buttons with CSS, sometimes nothing can substitute using your own pixel-perfect image. In the tutorial we show you how simple it is to source an image and then change the Input Type accordingly.
Once the image is in place, we then take the tutorial one stage further by adding a little inline JavaScript to allow you to source a ‘Rollover’ or ‘Hover’ image. You can download the code used in the tutorial below:
HTML Image Submit Button
In the code below, we change the ‘type’ attribute from ‘text’ to ‘image’. In doing this, we then need to source the image with the ‘src’ attribute. As we are now using the ‘Image Type’, you have no need for the ‘value’ attribute.
<input name="submit" type="image" src="submit-up.gif" />
Adding the Rollover JavaScript
Next, you can choose to add the following, simple JavaScript to specify a Rollover State for your submit button.
<input name="submit" type="image" src="submit-up.gif" onmouseover="this.src='submit-over.gif'" onmouseout="this.src='submit-up.gif'" />
The above is a simple, compliant and effective method for customising your HTML Submit Buttons.
Hi! thanks!
What about if I have the submit script inside of a php tag?
An error comes up. I think is because the single quotes.
The error is: unexpected T_STRING
Hi Aldo, try escaping the single quotation marks with backslashes like this:
Thanks James. Well presented, concise and effective. ATB, Tim
Hi guys, great tutorial… but how can this be used for a reset button?
!!thanks you saved me a lot of time, its fast easy thanks again for sharing!!
Thanks – that’s so much easier than some of the other methods I’ve seen used! Great tutorial!
can i add text on the button??
Hi Mike, try our more recent tutorial, if you’re looking to have editable text /blog/videos/liquid-css-button.html