Question

Possible Duplicate:
Text on an Image button in c# asp.net 3.5

I want a asp.net button with text on left and image on right

Answer 1

Here’s one I wrote:

public class WebImageButton : LinkButton, IButtonControl
{
    protected override void OnPreRender(EventArgs e)
    {
        if (!this.DesignMode)
        {
            // Apply the image
            if (this.Image.Length > 0)
            {
                this.Style.Add("background-image", "url(" + this.Image + ")");
                this.Style.Add("background-repeat", "no-repeat");
                this.Style.Add("background-position", this.ImageHorizontalOffset + " " + this.ImageVerticalOffset);
            }
        }

        base.OnPreRender(e);
    }

    [DescriptionAttribute("The path to the default image to be displayed.")]
    public string Image
    {
        get
        {
            if (_image == null)
            {
                return string.Empty;
            }
            return _image;
        }
        set
        {
            _image = value;
        }
    }
    private string _image;

    [DescriptionAttribute("The unit to offset the image by horizontally.")]
    public string ImageHorizontalOffset
    {
        get
        {
            return _imageHorizontalOffset;
        }
        set
        {
            _imageHorizontalOffset = value;
        }
    }
    private string _imageHorizontalOffset = "0px";

    [DescriptionAttribute("The unit to offset the image by vertically.")]
    public string ImageVerticalOffset
    {
        get
        {
            return _imageVerticalOffset;
        }
        set
        {
            _imageVerticalOffset = value;
        }
    }
    private string _imageVerticalOffset = "center";

}   

Then the CSS that accompanies it:

.ImageButton
{
    background:#666;
    border:solid 1px #000;
    color:#FFF;
    font-size:10pt;
    font-weight:bold;
    padding:4px;
    text-align:center;
    cursor:hand;
}

And an example of its use:

<ctrl:WebImageButton ID="WebImageButton1" runat="server"
    OnClick="WebImageButton1_Click" CssClass="ImageButton" Text="Click me" 
    ImageHorizontalOffset="4px" />