Question

I am trying to do a button like this in an input:

I am able to do it as a <a> (as seen in example) but cant figure it out as an <input> the main problem being that the + image is part of a sprite and when I add the sprite to the input it becomes the size of the input tag (as seen in example). Is there a way to make it look like the above example without editing the sprite?

Example

Answer 1

Because you can’t put elements inside an <input /> tag, you can’t accomplish this with a sprite, you could with an individual image though.

You can use your first example, and simply attach the submit() action to it using JavaScript.

<a class="contentAddToCart2" href="document.getElementById('#formID').submit();return false;" id="submitButton">Buy Now<span></span></a>

with jQuery you could use $('#formID').submit(); return false; instead, or attach it via a click command like so.

DEMO: http://wecodesign.com/demos/stackoverflow-7074339.htm

$( document ).ready( function() {
    $( '#submitButton' ).bind( 'click', function() {
        $( this ).submit();
        return false;
    }
}