I have a image button. I wanted to add a text "Search" on it. I am not able to add it because the "imagebutton" property in VS 2008 does not have text control in it. Can anyone tell me how to add text to a image button??
<asp:ImageButton ID="Searchbutton" runat="server" AlternateText="Search"
CssClass="bluebutton"
ImageUrl="../Graphics/bluebutton.gif" Width="110px"
onclick="Searchbutton_Click"/>
<button runat="server"
style="background-image:url('/Content/Img/stackoverflow-logo-250.png')" >
your text here<br/>and some more<br/><br/> and some more ....
</button>
This tip from dotnetslave.com worked for me:
<asp:LinkButton
CssClass="lnkSubmit"
ID="lnkButton"
runat="server">SUBMIT</asp:LinkButton>
a.lnkSubmit:active
{
margin:0px 0px 0px 0px;
background:url(../../images/li_bg1.jpg) left center no-repeat;
padding: 0em 1.2em;
font: 8pt "tahoma";
color: #336699;
text-decoration: none;
font-weight: normal;
letter-spacing: 0px;
}
You can't do that with ImageButton.
However, you can use a simple Button, set the text, and add a background image (bluebutton.gif) using CSS to achieve the desired effect.
It is not possible to add text inside of an image button. I have also faced the same problem. My solution was to use a link button instead of an image button. Just adding the image in the style tag should work.
I don't think you can write text to an ImageButton control of ASP.NET. You can generate image on the fly if that's what you need, and write the text from your code behind, but it will be too complicated, use normal button with CSS instead, unless your image cannot be generated by CSS.
You can also do this using an asp:Label, like this:
<style type="text/css">
.faux-button
{
cursor:pointer;
}
</style>
<div class="faux-button">
<asp:ImageButton ID="ibtnAddUser"
runat="server"
ImageUrl="~/Images/add.gif"
AlternateText="Add a user image" />
<asp:Label ID="lblAddUser"
runat="server"
Text="Add User"
AssociatedControlID="imgClick" />
</div>
I realise this is an old post, but I have recently solved this same problem for myself.
I created an ImgButton server control to render this:
<button> <img src="button_icon.png" /> Caption Text </button>
Using CSS to style a background image has some drawbacks, mainly:
I'll try to insert the code here, but also have the full source code and examples here: Button with Img tag and Caption Text
ImgButton.cs:
[DefaultProperty("Text")]
[DefaultEvent("Click")]
[ToolboxData("<{0}:ImgButton runat=server></{0}:ImgButton>")]
public class ImgButton : WebControl, IPostBackEventHandler
{
#region Public Properties
public enum ImgButtonStyle
{
Button,
Anchor
}
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("")]
[Localizable(true)]
public string Text
{
get
{
String s = (String)ViewState["Text"];
return ((s == null) ? String.Empty : s);
}
set
{
ViewState["Text"] = value;
}
}
[EditorAttribute(typeof(System.Web.UI.Design.ImageUrlEditor), typeof(UITypeEditor))]
public string ImgSrc { get; set; }
public string CommandName { get; set; }
public string CommandArgument { get; set; }
[EditorAttribute(typeof(System.Web.UI.Design.UrlEditor), typeof(UITypeEditor))]
public string NavigateUrl { get; set; }
public string OnClientClick { get; set; }
public ImgButtonStyle RenderStyle { get; set; }
[DefaultValue(true)]
public bool UseSubmitBehavior { get; set; }
[DefaultValue(true)]
public bool CausesValidation { get; set; }
public string ValidationGroup { get; set; }
[DefaultValue(0)]
public int Tag { get; set; }
#endregion
#region Constructor
public ImgButton()
{
Text = "Text";
ImgSrc = "~/Masters/_default/img/action-help.png";
UseSubmitBehavior = true;
CausesValidation = true;
}
#endregion
#region Events
// Defines the Click event.
public event EventHandler Click;
public event CommandEventHandler Command;
protected virtual void OnClick(EventArgs e)
{
if (Click != null)
{
Click(this, e);
}
}
protected virtual void OnCommand(CommandEventArgs e)
{
if (Command != null)
{
Command(this, e);
}
RaiseBubbleEvent(this, e);
}
public void RaisePostBackEvent(string eventArgument)
{
if (CausesValidation)
{
Page.Validate(ValidationGroup);
if (!Page.IsValid) return;
}
OnClick(EventArgs.Empty);
if (!String.IsNullOrEmpty(CommandName))
OnCommand(new CommandEventArgs(CommandName, CommandArgument));
}
#endregion
#region Rendering
// Do not wrap in <span> tag
public override void RenderBeginTag(HtmlTextWriter writer)
{
writer.Write("");
}
protected override void RenderContents(HtmlTextWriter output)
{
string click;
string disabled = (Enabled ? "" : "disabled ");
string type = (String.IsNullOrEmpty(NavigateUrl) && UseSubmitBehavior ? "submit" : "button");
string imgsrc = ResolveUrl(ImgSrc ?? "");
if (String.IsNullOrEmpty(NavigateUrl))
click = Page.ClientScript.GetPostBackEventReference(this, "");
else
if (NavigateUrl != null)
click = String.Format("location.href='{0}'", ResolveUrl(NavigateUrl));
else
click = OnClientClick;
switch (RenderStyle)
{
case ImgButtonStyle.Button:
if (String.IsNullOrEmpty(NavigateUrl) && UseSubmitBehavior)
{
output.Write(String.Format(
"<button id=\"{0}\" {1}class=\"{2}\" type=\"{3}\" name=\"{4}\" title=\"{5}\"><img src=\"{6}\" alt=\"{5}\"/>{7}</button>",
ClientID,
disabled,
CssClass,
type,
UniqueID,
ToolTip,
imgsrc,
Text
));
}
else
{
output.Write(String.Format(
"<button id=\"{0}\" {1}class=\"{2}\" type=\"{3}\" name=\"{4}\" onclick=\"javascript:{5}\" title=\"{6}\"><img src=\"{7}\" alt=\"{6}\"/>{8}</button>",
ClientID,
disabled,
CssClass,
type,
UniqueID,
click,
ToolTip,
imgsrc,
Text
));
}
break;
case ImgButtonStyle.Anchor:
output.Write(String.Format(
"<a id=\"{0}\" {1}class=\"{2}\" onclick=\"javascript:{3}\" title=\"{4}\"><img src=\"{5}\" alt=\"{4}\"/>{6}</a>",
ID,
disabled,
CssClass,
click,
ToolTip,
imgsrc,
Text
));
break;
}
}
public override void RenderEndTag(HtmlTextWriter writer)
{
writer.Write("");
}
#endregion
}
Here is the CSS I use on my buttons (where I put "icon" in the CssClass property of the button):
button.icon
{
cursor: pointer;
}
button.icon img
{
margin: 0px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
}
If you use a Link button, you can add a bootstrap button and then add text via the CSS "after" property.
LinkButton:
<asp:LinkButton id="download" CssClass="btn btn-primary" Text="Download" OnCommand="OnButtonClick" CommandName="Download" runat="server">
<span aria-hidden="true" class="glyphicon glyphicon-download-alt"></span></asp:LinkButton>
CSS:
#MainContent_download:after{
content: "Download";
padding-left: 5px;
}
I prefer the below solution:
<div style="padding: 5px; float: left;overflow: auto;height: auto;">
<asp:ImageButton ID="ImageButton2" ImageUrl="./icons/search24.png" ToolTip="Search" runat="server" />
<p><asp:Label ID="Label7" runat="server" Text="Search"></asp:Label></p>
</div>
You can change the style to make it center aligned, etc.
