John Davidson

Message:

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

---

My Answer:
html

In this code snippet, we have created a custom submit button using an image. The `background-image` property is used to set the image for the button. We have also added styles for the hover and active states of the button by using the `:hover` and `:active` pseudo-classes.

Make sure to replace `'submit.png'`, `'submit-hover.png'`, and `'submit-click.png'` with the actual paths to your button images.

This code should give you a custom submit button with three different states - normal, hover, and onclick.