Submit Button Image

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


<input type="submit" value="Subscribe">


input[type=submit] {
    background:url(../images/btn-subscribe.gif) none;

What shows up

What it should Display



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


.imgClass { 
background-image: url(;
background-position:  0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
  background-position:  0px -52px;

  background-position:  0px -104px;
<!-- HTML -->
<input type="submit" value="" class="imgClass" />

<input type="image" src="path to image" name="submit" />


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:

background-image:url(path to url);



<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

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="".

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.

Need Your Help

How to get a single model object using multiple ORM lookup parameters


employees = Employee.objects.filter(age=23, sex='female')

How to build a minimal WiX installer UI without a license page?

wix installer wix3

I would like to use the WixUI_Minimal installer, but I don't want the license page. How can I do this?