Change CSS Cuffon button

Question

I have a form in my webpage which have a CSS button, that button is embedded in a way i have never seen, in a cuffon related method perhaps (?)

Anyway i am trying to change that button to my button but dont know how to assign the submit method to it..

The current button:

<p><input type="submit" value="Send"/></p>

The Page

How should i go about adding a png button and give it the submit value?

thats one way of trying to do it yes, but it didnt recognized the png location, although its correct — TonalDev, Mar 15 '13 at 14:51
The following may be helpful: http://stackoverflow.com/questions/3381609/button-image-as-form-input-submit-button Just update the image to your specifications and design. — Marc Audet, Mar 15 '13 at 14:52
@Martina Let me check into this and get a better reference. I will update my post later. I don't see this construct often and I am curious. — Marc Audet, Mar 15 '13 at 15:00

score 1 · Answer 1 · edited Mar 15 '13 at 15:05

1

<input type="image" value="Submit" src="yourImage.jpg">

edited Mar 15 '13 at 15:05

Andy

14,427
3
52
76

answered Mar 15 '13 at 14:35

zajd

761
1
5
18

score 1 · Answer 2 · answered Mar 15 '13 at 14:35

1

<button name="xyz" value="something" type='submit'>
    <img src='mybutton.png' alt='' />
</button>

answered Mar 15 '13 at 14:35

Martina

1,634
1
10
6

Thanx for the reply..i'm getting this weird grey button..not the one i entered...http://www.tranceil.co.il/10kcontest/ – TonalDev Mar 15 '13 at 14:48
1

@TonalDev : ** – Martina Mar 15 '13 at 14:51

Marc Audet · Accepted Answer · 2013-03-15T15:16:56.457

Try the following syntax:

<input type="image" value="Submit" src="img/newbuttonsend-small.png">

There should not be angle-brackets in the file path/name.

Using INPUT with image as Submit in a Form

Reference: http://www.w3.org/TR/html401/interact/forms.html#h-17.4

See the section discussing:

image
Creates a graphical submit button. The value of the src attribute specifies the URI of the image that will decorate the button. For accessibility reasons, authors should provide alternate text for the image via the alt attribute.

When you click on the image, the browser echos the x-y coordinates of the pointer location, which may be useful in certain applications.

Change CSS Cuffon button

3 Answers3