How to Make a Submit Button Into a Custom Image

Use any image you'd like for the "Submit" button.

When creating a form on your website, it inevitably ends with a "Submit" button. The standard design for this button is a simple gray box that you get when you use the HTML tag <input="submit">. If you'd like to change this to create something unique for your site, you can easily do so by creating an image and simply changing a bit of the HTML code.

Instructions

1. Create an image to use as the submit button. You can create this using an image editing software program, such as Photoshop or GIMP. Remember to place text in the image so that people know that this is the image they should click. Something like "Submit" or "Click Here" works well. Save the image as a JPG or GIF file. Remember the file name.

2. Store the image file where you'll store other images. Many people create a special "images" folder for their websites. If you do this, you'll want to store the picture in the "images" folder. If not, you can store the image in the main folder.

3. Use the right code to show the image as the submit button. Where you would normally use the code <input type="submit">, you will want to change it to use a different image. Instead, your code should read <input type="image" src="image.jpg">, where "image.jpg" is the name of your file. If you've stored the file in an image folder, the code should read <input type="image" src="images/image.jpg">, where "images" is the name of your folder and "image.jpg" is the name of your image file.

4. Add additional attributes. If you'd like, you can add additional specifications within the code, such as "height," "width" and "alt."

Tips & Warnings

• If your image does not show up, double-check that you've written the right file name and the right location. Capitalization matters.

References

• Psacake.com: Use Image as Submit Button
• Web Developer's Notes: Using an Image as a Submit Button