Placing an image on a button in html using php [duplicate] - php

Question

I want to use a Submit Button Image instead of the standard Button. I searched on Google and SO and got a few different ways.
Which is the right way of using an Image as a Submit Button ?
Also i would want to add three states for the button - normal, hover, onclick
What i tried
HTML
<input type="submit" value="Subscribe">
CSS
input[type=submit] {
background:url(../images/btn-subscribe.gif) none;
text-indent:-9999px;
width:109px;
height:41px;
}
What shows up
What it should Display

Answer 1

Edited:
I think you are trying to do as done in this DEMO
There are three states of a button: normal, hover and active
You need to use CSS Image Sprites for the button states.
See The Mystery of CSS Sprites
/*CSS*/
.imgClass {
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position: 0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{
background-position: 0px -52px;
}
.imgClass:active{
background-position: 0px -104px;
}
<!-- HTML -->
<input type="submit" value="" class="imgClass" />

Answer 2

<input type="image" src="path to image" name="submit" />
UPDATE:
For button states, you can use type="submit" and then add a class to it
<input type="submit" name="submit" class="states" />
Then in css, use background images for:
.states{
background-image:url(path to url);
height:...;
width:...;
}
.states:hover{
background-position:...;
}
.states:active{
background-position:...;
}

Answer 3

<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
Where the standard submit button has TYPE="submit", we now have TYPE="image". The image type is by default a form submitting button. More simple

Answer 4

It's very important for accessibility reasons that you always specify value of the submit even if you are hiding this text, or if you use <input type="image" .../> to always specify alt="" attribute for this input field.
Blind people don't know what button will do if it doesn't contain meaningful alt="" or value="".

Answer 5

You have to remove the borders and add a background image on the input.
.imgClass {
background-image: url(path to image) no-repeat;
width: 186px;
height: 53px;
border: none;
}
It should be good now, normally.