I am looking for a solution where I will be able to add an image and text both in asp.net button.
<asp:Button ID="Button1" runat="server" Text="Button"/>
I am only able to specify text to the button, but how can I add an image as well to it?
-
you should be using msdn.microsoft.com/en-us/library/…Royi Namir– Royi Namir2013-07-28 20:18:02 +00:00Commented Jul 28, 2013 at 20:18
-
Can I specify text and image both together in Image button?Arry– Arry2013-07-28 20:22:31 +00:00Commented Jul 28, 2013 at 20:22
-
Yes ofcourse. msdn.microsoft.com/en-us/library/…Royi Namir– Royi Namir2013-07-28 20:23:04 +00:00Commented Jul 28, 2013 at 20:23
-
@RoyiNamir: Text is not visible, only image is visible in the button.Arry– Arry2013-07-28 20:28:21 +00:00Commented Jul 28, 2013 at 20:28
-
Try checking out this question stackoverflow.com/questions/262141/…Dan Drews– Dan Drews2013-07-28 20:37:40 +00:00Commented Jul 28, 2013 at 20:37
|
Show 1 more comment
4 Answers
By default, ASP .Net doesn't have a button which can render both image and text at the same time. However, you can achieve in two ways.
Using CSS
I prefer CSS because it is light weight, and you can style it whatever you want.
<style type="text/css">
.submit {
border: 1px solid #563d7c;
border-radius: 5px;
color: white;
padding: 5px 10px 5px 25px;
background: url(https://i.sstatic.net/jDCI4.png)
left 3px top 5px no-repeat #563d7c;
}
</style>
<asp:Button runat="server" ID="Button1" Text="Submit" CssClass="submit" />
Third Party Control
It works right out of the box. However, you cannot change their style easily.
Use third party control like Telerik RadButton.
Last but not least if you want, you can implement a custom server control by yourself.
Here is a simple Solution, that works for me:
<asp:LinkButton runat="server" ID="btnRun" Text="<i class='fa fa-home'></i> Search"
CssClass="btn-success" />
Comments
Here is a simple Solution, that works for me:
<asp:LinkButton ID="ClickMe" runat="server" Text="Click Me" OnClick="ClickMe_Click" style="text-decoration: none; color: #505050;">
<asp:Image runat="server" ImageUrl="/Resources/Bitmaps/excel_24.png" style="margin-left:5px;" />
</asp:LinkButton>
Comments
You can also use a font icon instead of an image.
CSS
.button {
min-width:175px;
border-radius:50px;
background:none;
outline:none;
border:none;
color:#fff;
padding:15px 25px;
margin-top:10px;
background: rgba(115,84,178,1);
background: -moz-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(115,84,178,1)), color-stop(34%, rgba(115,84,178,0.95)), color-stop(35%, rgba(115,84,178,0.95)), color-stop(62%, rgba(96,107,192,0.91)), color-stop(100%, rgba(84,160,231,0.85)));
background: -webkit-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
background: -o-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
background: -ms-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
background: linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7354b2', endColorstr='#54a0e7', GradientType=1 );
}
You can remove the background and filter part in the class button in the above style. I just used it for the gradient background for the button.
HTML
<button runat="server" id="btnDownload" class="button" onserverclick="clickEvent">
<i class="fa fa-download" style="font-size:20px;float:left;"></i> DOWNLOAD
</button>
Button looks like below.
And even you can change the icon color by just adding color to the <i>...</i>. Something like below.
<button runat="server" id="btnDownload" class="button" onserverclick="clickEvent">
<i class="fa fa-download" style="font-size:20px;float:left;color:#ff4444;"></i>
DOWNLOAD
</button>