William Proulx William Proulx - 6 months ago 19
Vb.net Question

How to make an Image Button with text in VB.net?

Hey there my question is pretty simple i'm trying to do a button exactly like the one you can get in vb form. For Example I want some text in my button and I also want an image in it. The only problem is that in VB.net there is only two type of button the first one is button with an image in it and no text at all and the second one is one with only text in it. The only way i've found is putting the image in the background. Unfortunatly the image is taking all the spaces in the button. I'd like to know if there's a way to align the back-ground image to the left or to right for example

Here my HTML code for the button:

<asp:Button ID="btn_LoadReport" runat="server" Text="Charger"
style="margin-left: 0px; margin-bottom: 0px; margin-right:0px;"
Height="35px" Width="102px"
CssClass="Charger" />


And this is the css code that I Have for the moment:

.Charger
{
background-image:url(report.png);
background-repeat:no-repeat;
text-align:left;
}


Thx

Answer

I've tried putting the image in the background with a css but my text is over the images

This is what the background-position attribute is for.

<button>Text</button>

button {
    padding-right:40px;
    background-image:url(myImage.png);
    background-repeat:no-repeat;
    background-position:center right;
}

Note that the padding-right property is used to prevent the text overlapping the image.

JSFiddle example.

Comments