Geek Answers Handbook

Adding image and text as to asp.net button

I am looking for a solution where I can add image and text as in asp.net button.

<asp:Button ID="Button1" runat="server" Text="Button"/>

I can only specify the text for the button, but how can I add an image to it?

+8
button
source share
3 answers

By default, ASP.Net does not have a button that can simultaneously display both image and text . However, you can achieve in two ways.

CSS usage

I prefer CSS because it is light weight and you can style it however you want.

enter image description here

 <style type="text/css"> .submit { border: 1px solid #563d7c; border-radius: 5px; color: white; padding: 5px 10px 5px 25px; background: url(https://i.stack.imgur.com/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 easily change their style.

enter image description here

Use third-party controls such as Telerik RadButton .

And last but not least, if you want, you can implement your own server-side control yourself.

+24
source share

You can also use the font icon instead of the 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 button class 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>

The button is as follows.

enter image description here

Screenshot here

And even you can change the color of the icon by simply adding color to <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>
0
source share

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>
0
source share

More articles:


All Articles