Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Button / Image Buttons

RadButton used as ImageButton

RadButton with Background Image and Text
Download Background Image and Primary Icon
GO! GO! Background Image and Text
Play PLAY Background Image and Primary Icon / Background Image and Text
Next Next >>> Background Image and Text
Previous << Previous Background Image and Text
Add to Cart Shopping Cart Background Image and Text
Add to Cart Shopping Cart Background Image, Primary Icon and Text

  • Image Buttons

    The RadButton control can be used as ImageButton. The user can use any browser supported image type for the image of the RadButton. The user can easily combine: Image, Icons, and Text to achieve the desired scenario. These properties are the most important when using the RadButton control as ImageButton:

    • Width - Width must be set or the Image will not be shown. The value should be equal to the width of the image.
    • Height - Height must be set or the Image will not be shown. The value should be equal to the height of the image.
    • Image - Inner property through which all the Image related properties are controlled
      1. ImageUrl - The absolute or relative path to the image used as button. This or the CssClass property must be set in order for the image to appear.
      2. EnableImageButton - Used to explicitly enable the image button functionality. This comes handy when the user wants to set the image through the RadButton's CssClass property, and use image sprite for the hovered and pressed image states.
      3. IsBackgroundImage - This property is used to control how the image will be used. In case the user wants to display an Icon or Text on the button, the IsBackgroundImage should be set to true.


Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
            .imgBtnTable td
            {
                border-bottom: 1px solid #eee;
                padding: 5px;
            }
            
            .imgBtnTable td .txtImg
            {
                display: block;
                float: left;
                width: 150px;
            }
            .imgBtnTable td .text
            {
                width: 400px;
            }
            .imgBtnTable td.center
            {
                text-align: center;
                border-right: 1px solid #eee;
            }
            .goButtonClassHov .rbText
            {
                color: White !important;
            }
            .prevButtonClassHov .rbText
            {
                color: Yellow !important;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" ShowSkinChooser="false" />
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <table cellpadding="0" cellspacing="0" width="100%" class="imgBtnTable">
            <tr>
                <td style="width: 40%;">
                    <qsf:InformationBox ID="imageButton_InfoBox" runat="server" Title="RadButton used as ImageButton">
                    </qsf:InformationBox>
                </td>
                <td>
                    <qsf:InformationBox ID="bgrImage_InfoBox" runat="server" Title="RadButton with Background Image and Text">
                    </qsf:InformationBox>
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton ID="imgBtn3" runat="server" Width="37px" Height="36px" Text="Download">
                        <Image ImageUrl="img/cb_download.png" />
                    </telerik:RadButton>
                </td>
                <td>
                    <span class="txtImg">
                        <telerik:RadButton ID="btnBgrImg1" runat="server" Width="37px" Height="36px" ToolTip="Download">
                            <Image ImageUrl="img/cb_dl_empty.png" IsBackgroundImage="true" />
                            <Icon PrimaryIconUrl="img/cb_dl_arrow.png" PrimaryIconWidth="21px" PrimaryIconHeight="25px"
                                PrimaryIconTop="3px" PrimaryIconLeft="9px" />
                        </telerik:RadButton>
                    </span><span class="text">Background Image and Primary Icon</span>
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton ID="imgBtn4" runat="server" Width="42px" Height="43px" Text="GO!">
                        <Image ImageUrl="img/cb_go.png" />
                    </telerik:RadButton>
                </td>
                <td>
                    <span class="txtImg">
                        <telerik:RadButton ID="btnBgrImg2" runat="server" Width="42px" Height="43px" ForeColor="Black"
                            HoveredCssClass="goButtonClassHov" Text="GO!">
                            <Image ImageUrl="img/cb_go_empty.png" IsBackgroundImage="true" />
                        </telerik:RadButton>
                    </span><span class="text">Background Image and Text</span>
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton ID="imgBtn5" runat="server" Width="58px" Height="59px" Text="Play">
                        <Image ImageUrl="img/cb_play.png" />
                    </telerik:RadButton>
                </td>
                <td>
                    <span class="txtImg">
                        <telerik:RadButton ID="btnBgrImg3" runat="server" Width="58px" Height="59px" ToolTip="Play">
                            <Image ImageUrl="img/cb_square_empty.png" IsBackgroundImage="true" />
                            <Icon PrimaryIconUrl="img/cb_play_arrow.png" PrimaryIconWidth="23px" PrimaryIconHeight="36px"
                                PrimaryIconTop="12px" PrimaryIconLeft="19px" />
                        </telerik:RadButton>
                        <telerik:RadButton ID="btnBgrImg4" runat="server" Width="58px" Height="59px" Text="PLAY"
                            ForeColor="Black" HoveredCssClass="goButtonClassHov">
                            <Image ImageUrl="img/cb_square_empty.png" IsBackgroundImage="true" />
                        </telerik:RadButton>
                    </span><span class="text">Background Image and Primary Icon / Background Image and Text</span>
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton ID="imgBtn6" runat="server" Width="80px" Height="80px" Text="Next">
                        <Image ImageUrl="img/cb_next.png" HoveredImageUrl="img/cb_nextHov.png" />
                    </telerik:RadButton>
                </td>
                <td>
                    <span class="txtImg">
                        <telerik:RadButton ID="btnBgrImg5" runat="server" Width="80px" Height="80px" Text="Next >>>"
                            ForeColor="White" HoveredCssClass="prevButtonClassHov">
                            <Image ImageUrl="img/cb_black_square.png" HoveredImageUrl="img/cb_blue_square.png"
                                IsBackgroundImage="true" />
                        </telerik:RadButton>
                    </span><span class="text">Background Image and Text</span>
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton ID="imgBtn7" runat="server" Width="80px" Height="80px" Text="Previous">
                        <Image ImageUrl="img/cb_prev.png" HoveredImageUrl="img/cb_prevHov.png" />
                    </telerik:RadButton>
                </td>
                <td>
                    <span class="txtImg">
                        <telerik:RadButton ID="btnBgrImg6" runat="server" Width="80px" Height="80px" Text="<< Previous"
                            ForeColor="White" HoveredCssClass="prevButtonClassHov">
                            <Image ImageUrl="img/cb_black_square.png" HoveredImageUrl="img/cb_blue_square.png"
                                IsBackgroundImage="true" />
                        </telerik:RadButton>
                    </span><span class="text">Background Image and Text</span>
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton ID="imgBtn2" runat="server" Width="101px" Height="29px" Text="Add to Cart">
                        <Image ImageUrl="img/cb_cart_text.png" />
                    </telerik:RadButton>
                </td>
                <td>
                    <span class="txtImg">
                        <telerik:RadButton ID="btnBgrImg7" runat="server" Width="101px" Height="29px" Text="Shopping Cart"
                            ForeColor="Black" HoveredCssClass="goButtonClassHov">
                            <Image ImageUrl="img/cb_empty_01.png" IsBackgroundImage="true" />
                        </telerik:RadButton>
                    </span><span class="text">Background Image and Text</span>
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton ID="imgBtn1" runat="server" Width="114px" Height="26px" Text="Add to Cart">
                        <Image ImageUrl="img/cb_cart_button.png" />
                    </telerik:RadButton>
                </td>
                <td>
                    <span class="txtImg">
                        <telerik:RadButton ID="btnBgrImg8" runat="server" Width="104px" Height="26px" Text="Shopping Cart"
                            ForeColor="Black" HoveredCssClass="goButtonClassHov" Style="padding-left: 10px">
                            <Image ImageUrl="img/cb_empty_02.png" IsBackgroundImage="true" />
                            <Icon PrimaryIconUrl="img/cb_cart_icon.png" PrimaryIconWidth="15px" PrimaryIconHeight="13px"
                                PrimaryIconTop="7px" PrimaryIconLeft="7px" />
                        </telerik:RadButton>
                    </span><span class="text">Background Image, Primary Icon and Text</span>
                </td>
            </tr>
        </table>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451