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

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!

Answers


input[type=submit] {
    background: url(http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png);
    border: 0;
    display: block;
    height: _the_image_height;
    width: _the_image_width;
}

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.)


You can override the style given by the browser to the button.

For example adding this to your css does the trick for me (on Chrome):

.controls input {
   background: url(' http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png') -411px -540px no-repeat;
   width: 199px;
   height: 109px;
   border: none;
}

But really if you are not going to use the browser's css for the button, you should probably not use <input type='submit'> at all, and just insert the image (via an <img src="" /> tag or a <div> with the image as background) and attach a click listener to it.

For example:

The html:

<div class="controls">
    <img src="/yourimage.png" />
</div>

The javascript (assuming you use jQuery):

$('.controls img').click(function(){... stuff to do...});

HTML :

<lable>From css class</lable><input class="input" onclick="alert('clicked')" type="button" value="" /><br/>
<lable>From HTML tag</lable>
<input type="button" style="background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico);" onclick="alert('clicked')"/>

CSS :

.btn{
    display: inline-block;
 background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico);
    position: relative;
    border-radius: 5px;
}
.input{
    background: transparent;
    color: #fff;
    border: 0;
    padding-right: 20px;
    cursor: pointer;
    position: relative;
    padding: 5px 20px 5px 5px;
    z-index: 1;
}

JS Fiddle : http://jsfiddle.net/AJNnZ/26/


simple and easy way to make an INPUT tag as an image

<input type="submit" value="" style="background-image: url('images/img.png'); border:none; background-repeat:no-repeat;background-size:100% 100%;">

Another way that's kind of hackish is this (using jQuery):

<div onclick="$(this).parent('form').submit();"></div>

Then you style your div any way you like.


Need Your Help

Entity Framework 4.3.1 to 6 EDMX (ObjectContext)

c# .net entity-framework nuget edmx

I'm trying to upgrade a project from EF 4.3.1 to EF 6.0