Image Button

[will_exa]

Hi I got a little problem here I'm designing a Web-Software for my compagnie and I'm trying to do a Image Button exactly like the one you can see in VB form. You know the one with text and an image on the right or left in the button, but i can't figured out. At this time I was able to create a button thats as only an image or only text i want both of them and not one over the other.


Thank you very much for the answer

Will

[will_exa]

I've found the way. Just create a CSS add those property
.button
{
background-image:url(report.png);
background-repeat:no-repeat;
background-position:right;
text-align:left;
}

[tejas]

<input type="button" value="Add a new row" class="button_add" />
input.button_add {
background-image: url(/images/buttons/add.png); /* 16px x 16px */
background-color: transparent; /* make the button transparent */
background-repeat: no-repeat; /* make the background image appear only once */
background-position: 0px 0px; /* equivalent to 'top left' */
border: none; /* assuming we don't want any borders */
cursor: pointer; /* make the cursor like hovering over an <a> element */
height: 16px; /* make this the size of your image */
padding-left: 16px; /* make text start to the right of the image */
vertical-align: middle; /* align the text vertically centered */
}


Best of Luck will,