Submit Button Image

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

enter image description here

What it should Display

enter image description here

Either remove `text-indent` and add `value="Subscribe"` in `` or add the letters `Subscribe` on the image — asprin, Aug 02 '12 at 06:56

score 28 · Accepted Answer · edited Jan 29 '15 at 08:30

28

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" />

edited Jan 29 '15 at 08:30

Gerwin

1,572
5
23
51

answered Aug 02 '12 at 07:05

Ahsan Khurshid

9,383
1
33
51

2

For user-interface optimization I always add the css-rule `cursor: pointer;`. It changes the cursor to the hand icon on hover, just like links do by default. – Justus Romijn Mar 20 '13 at 16:16
2

WARNING, some browsers (Chrome) force some styles on submit. This issue appears when you use transparent PNG as submit background - overall background will have color = "buttonface" and will not be 100% transparent. Add background-color: transparent. – Piotr Müller May 21 '13 at 11:46
The link to the image you used is broken. – Brian McCutchon Sep 06 '16 at 03:47

asprin · Answer 2 · 2012-08-02T06:50:43.677

11

<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:...;
}

edited Aug 02 '12 at 06:50

answered Aug 02 '12 at 06:44

asprin

9,579
12
66
119

1

is adding the name=submit the key ? – Harsha M V Aug 02 '12 at 06:46
What if i want to add button states ? – Harsha M V Aug 02 '12 at 06:48
1

@HarshaMV What lbu said. `name` can be used to check for button click. For ex: In php `if(isset($_POST['name']))` – asprin Aug 02 '12 at 06:48
1

have updated my question. thats what i am getting when i try to add a bg image – Harsha M V Aug 02 '12 at 06:54
@HarshaMV Made a comment below your question – asprin Aug 02 '12 at 06:56

score 9 · Answer 3 · edited Aug 17 '15 at 14:26

9

<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

edited Aug 17 '15 at 14:26

Ram Sharma

8,676
7
43
56

answered Mar 16 '13 at 03:57

Ibnu

91
1
1

score 4 · Answer 4 · edited Aug 17 '15 at 14:27

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

edited Aug 17 '15 at 14:27

Ram Sharma

8,676
7
43
56

answered Mar 19 '13 at 12:25

Pawel Wilga

41
1

score 3 · Answer 5 · edited Mar 12 '13 at 15:03

3

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.

edited Mar 12 '13 at 15:03

Lee

564
1
10
30

answered Aug 02 '12 at 09:34

phndiaye

309
4
19

Submit Button Image

5 Answers5

Linked