CODEWITHSUNDEEP
htmlcssformsinput
Jacinto
Jacinto

Reputation: 558

Style an input look like a hyperlink

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

buy

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

Upvotes: 0

Views: 2386

Answers (3)

user888750
user888750

Reputation:

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

Upvotes: 5

steveax
steveax

Reputation: 17753

I don't understand why you don't use an input. You can assign padding and background images to inputs without any issues. As for that sprite, I think it's much easier to deal with if you put the "slots" in rows rather than columns.

Example here: http://jsfiddle.net/rre8d/

Upvotes: 0

Bazzz
Bazzz

Reputation: 26912

If you put your sprites under each other in the image instead of next to each other you can do it like this: http://jsfiddle.net/QMgg8/ and change the vertical position of the sprite in the background.

The reason for the spans to be there is that you can assign the background image for the button to them. In this demo I made them yellow because I don't have your image, and to make a proof of concept. You can use the vertical-position of the background for .contentAddToCart to choose the correct sprite. Currently it is set to top.

HTML

This is what I want the input to look like:<br/>
<span><a class="contentAddToCart" href="#">Buy Now</a></span>
<br/>
But this is as far as I have been able to figure out:<br/>
<span><input class="contentAddToCart" type="submit" name="Buy" value="Buy Now"></span>

CSS

.contentAddToCart {
   font-size: 15px;
   font-family: arial;
   text-decoration: none;
   color: black; 
   line-height: 24px;
   height: 24px;
   border: 1px solid #333;
   background: url("http://f.cl.ly/items/103I080w2r2Y0x122K3z/demo.png") no-repeat 58px top;
   display: inline-block;
   text-align: center;
   padding-right: 28px;
}

span {
    display: inline-block;
    background: yellow; /* put button background image here instead */
}

Upvotes: 0

Related Questions