Button

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Button - Image Buttons

RadButton used as ImageButton

RadButton with Background Image and Text

Disabled RadButton

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

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.

New: The inner property Image of the RadButton now exposes a property DisabledImageUrl that specifies the location of an image to display when the control is disabled.
<telerik:RadButton ID="RadButton1" runat="server" Width="37px" Height="36px" Text="Download"
    Enabled="false">
    <Image ImageUrl="img/cb_download.png" DisabledImageUrl="img/cb_download_d.png" />
</telerik:RadButton>
C# VB
Show code in new window Demo isolation steps
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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">
    <title>ASP.NET Button Demo - Image Buttons</title>
     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
     <table cellpadding="0" cellspacing="0" width="100%" class="imgBtnTable">
          <tr>
               <td style="width: 32%;">
                    <qsf:InformationBox ID="imageButton_InfoBox" runat="server" Title="RadButton used as ImageButton">
                    </qsf:InformationBox>
               </td>
               <td style="width: 32%;">
                    <qsf:InformationBox ID="bgrImage_InfoBox" runat="server" Title="RadButton with Background Image and Text">
                    </qsf:InformationBox>
               </td>
               <td style="width: 32%;">
                    <qsf:InformationBox ID="dImage_InfoBox" runat="server" Title="Disabled RadButton">
                    </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"></Image>
                    </telerik:RadButton>
               </td>
               <td class="center">
                    <span class="txtImg">
                         <telerik:RadButton ID="btnBgrImg1" runat="server" Width="37px" Height="36px" ToolTip="Download">
                              <Image ImageUrl="img/cb_dl_empty.png" IsBackgroundImage="true"></Image>
                              <Icon PrimaryIconUrl="img/cb_dl_arrow.png" PrimaryIconWidth="21px" PrimaryIconHeight="25px"
                                   PrimaryIconTop="3px" PrimaryIconLeft="9px"></Icon>
                         </telerik:RadButton>
                    </span><span class="text">Background Image and Primary Icon</span>
               </td>
               <td style="text-align: center;">
                    <telerik:RadButton ID="RadButton1" runat="server" Width="37px" Height="36px" Text="Download"
                         Enabled="false">
                         <Image ImageUrl="img/cb_download.png" DisabledImageUrl="img/cb_download_d.png"></Image>
                    </telerik:RadButton>
               </td>
          </tr>
          <tr>
               <td class="center">
                    <telerik:RadButton ID="imgBtn4" runat="server" Width="42px" Height="43px" Text="GO!">
                         <Image ImageUrl="img/cb_go.png"></Image>
                    </telerik:RadButton>
               </td>
               <td class="center">
                    <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"></Image>
                         </telerik:RadButton>
                    </span><span class="text">Background Image and Text</span>
               </td>
               <td style="text-align: center;">
                    <telerik:RadButton ID="RadButton2" runat="server" Width="42px" Height="43px" Text="GO!"
                         Enabled="false">
                         <Image ImageUrl="img/cb_go.png" DisabledImageUrl="img/cb_go_d.png"></Image>
                    </telerik:RadButton>
               </td>
          </tr>
          <tr>
               <td class="center">
                    <telerik:RadButton ID="imgBtn5" runat="server" Width="58px" Height="59px" Text="Play">
                         <Image ImageUrl="img/cb_play.png"></Image>
                    </telerik:RadButton>
               </td>
               <td class="center">
                    <span class="txtImg">
                         <telerik:RadButton ID="btnBgrImg3" runat="server" Width="58px" Height="59px" ToolTip="Play">
                              <Image ImageUrl="img/cb_square_empty.png" IsBackgroundImage="true"></Image>
                              <Icon PrimaryIconUrl="img/cb_play_arrow.png" PrimaryIconWidth="23px" PrimaryIconHeight="36px"
                                   PrimaryIconTop="12px" PrimaryIconLeft="19px"></Icon>
                         </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"></Image>
                         </telerik:RadButton>
                    </span><span class="text">Background Image and Primary Icon / Background Image and Text</span>
               </td>
               <td style="text-align: center;">
                    <telerik:RadButton ID="RadButton3" runat="server" Width="58px" Height="59px" Text="Play"
                         Enabled="false">
                         <Image ImageUrl="img/cb_play.png" DisabledImageUrl="img/cb_play_d.png"></Image>
                    </telerik:RadButton>
               </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"></Image>
                    </telerik:RadButton>
               </td>
               <td class="center">
                    <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"></Image>
                         </telerik:RadButton>
                    </span><span class="text">Background Image and Text</span>
               </td>
               <td style="text-align: center;">
                    <telerik:RadButton ID="RadButton4" runat="server" Width="80px" Height="80px" Text="Next"
                         Enabled="false">
                         <Image ImageUrl="img/cb_next.png" DisabledImageUrl="img/cb_next_d.png" HoveredImageUrl="img/cb_nextHov.png">
                         </Image>
                    </telerik:RadButton>
               </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"></Image>
                    </telerik:RadButton>
               </td>
               <td class="center">
                    <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"></Image>
                         </telerik:RadButton>
                    </span><span class="text">Background Image and Text</span>
               </td>
               <td style="text-align: center;">
                    <telerik:RadButton ID="RadButton5" runat="server" Width="80px" Height="80px" Text="Previous"
                         Enabled="false">
                         <Image ImageUrl="img/cb_prev.png" DisabledImageUrl="img/cb_prev_d.png" HoveredImageUrl="img/cb_prevHov.png">
                         </Image>
                    </telerik:RadButton>
               </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"></Image>
                    </telerik:RadButton>
               </td>
               <td class="center">
                    <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"></Image>
                         </telerik:RadButton>
                    </span><span class="text">Background Image and Text</span>
               </td>
               <td style="text-align: center;">
                    <telerik:RadButton ID="RadButton6" runat="server" Width="101px" Height="29px" Text="Add to Cart"
                         Enabled="false">
                         <Image ImageUrl="img/cb_cart_text.png" DisabledImageUrl="img/cb_cart_text_d.png">
                         </Image>
                    </telerik:RadButton>
               </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"></Image>
                    </telerik:RadButton>
               </td>
               <td class="center">
                    <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"></Image>
                              <Icon PrimaryIconUrl="img/cb_cart_icon.png" PrimaryIconWidth="15px" PrimaryIconHeight="13px"
                                   PrimaryIconTop="7px" PrimaryIconLeft="7px"></Icon>
                         </telerik:RadButton>
                    </span><span class="text">Background Image, Primary Icon and Text</span>
               </td>
               <td style="text-align: center;">
                    <telerik:RadButton ID="RadButton7" runat="server" Width="114px" Height="26px" Text="Add to Cart"
                         Enabled="false">
                         <Image ImageUrl="img/cb_cart_button.png" DisabledImageUrl="img/cb_cart_button_d.png">
                         </Image>
                    </telerik:RadButton>
               </td>
          </tr>
     </table>
    </form>
</body>
</html>