How can I make my <input type="submit" /> an image?

css types input submit
Lindsay picture Lindsay · Oct 13, 2012 · Viewed 84k times · Source

I have a beautiful little CSS image that needs to be a button. I've tried about 20 different methods, none of which work. I just either get a blank nothing or a border with nothing inside.

The html: http://lrroberts0122.github.com/DWS/lab6/level-2/

The image: http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png

The CSS: http://lrroberts0122.github.com/DWS/lab6/level-2/css/main.css

I can't change it to "submit" for certain reasons, so I need to figure out how to make this work with CSS. Thank you for your help!

Answer

Jukka K. Korpela picture Jukka K. Korpela · Oct 13, 2012

Use an image submit button, as the doc says:

<input type="image"> defines an image as a submit button

<input type=image src=button.png alt="Submit feedback">

(I would not use an image suggesting snailmail when setting up an online form, but maybe there is some reason to create such associations.)

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More