CODEWITHSUNDEEP
htmlcsswebshop
RabbitDK
RabbitDK

Reputation: 53

Insert text above <input type="image">

The below code is for adding a product to the basket.

Instead of just using an image as a buy button in the input, I would like to have an image or a fill in the background and HTML text above it.

<input border="0" src="/images/buy.png" type="image" />

This is the complete code:

<span class="BuyButton_ProductInfo">
    <table id="BUYSECTION">
        <tbody>
            <tr>
                <td valign="top" align="left">Count<br />
                    <input id="amount" class="TextInputField_ProductInfo" maxlength="6" size="3" name="AMOUNT" value="1" type="text" />
                </td>
                <td>&nbsp;&nbsp;</td>
                <td class="BuyButton_ProductInfo">Buy<br />
                    <input border="0" src="/images/buy.png" type="image" />
                </td>
            </tr>
        </tbody>
    </table>
</span>

Upvotes: 5

Views: 10383

Answers (4)

Gutenberg
Gutenberg

Reputation: 1002

Try this:

HTML:

<input type="button" value="Texto del boton" class="imgButton" />​

CSS:

.imgButton{
background-image:url(/images/buy.png);
width: 100%;
height: 100%;    
}​

Saludos!

Upvotes: 0

Agah Toruk
Agah Toruk

Reputation: 381

You can insert text above input elements. I'm use label element for this work. You can edit the label element position with using CSS codes. 

<input src="/images/buy.png" type="image" id="myButton" />
<label for="myButton">Click me or image</label>

Upvotes: 1

oomlaut
oomlaut

Reputation: 773

Not sure I understand completely what you are trying to accomplish? Can you just set the display property in CSS? 

#BUYSECTION input[type="image"] {  
  display:block;
}

Otherwise, can you elaborate? Maybe provide a JSFiddle link to show the issue?

EDITED

Is it that you want a clickable submit button, with a pattern or "button-like" fill, but to still have text at a different z-index "above" the button?

HTML:

<button type="submit">Buy</button>

CSS:

button{
  /* reset the button style properties */
  border:0;
  display:block;
  /* include the image and dimensions */
  width:50px;
  height: 20px;
  background:transparent url("images/buy.png") no-repeat 50% 50%;
  /* format the text */
  text-align:center;
  padding:5px;
  font-weight:bold;
  color:#333;
}

Upvotes: 0

Gilly
Gilly

Reputation: 9692

Not sure if I understand your question correctly either,

But if you're talking about a solid background color on the submit button, you can use

<input type="submit" style="background-color: black; color: white;" value="your text" />

Upvotes: 0

Related Questions