Using An Image For The Submit Button

This is a simple tutorial you can use if you would like your submit form to have a submit button other than one you can customize with regular css.

I will be using the following image, but you can made your own and adjust the tutorial to what you need it to be to fit your image.

1. HTML

In your form, you need to name a class for your submit button. In this case, I have put “submit”.

<input type="submit" name="send" value="Submit" class="submit" />

2. CSS

In your css you need to put the following code. You will want to make sure your border is at 0px, specify the height and width, and then insert the background image file name.


.submit {
text-transform:uppercase;
font-weight:bold;
font-size: 16px;
display:block;
border:0;
height: 64px;
width: 171px;
padding: 2px;
background-image: url('submitbutton-example.png'); background-repeat: no-repeat;
}


Replace submitbutton-example.png with your image and your height and width with the size of your submit button. You can also replace submit with other words or change the text within the button to any size you desire.