New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Image Buttons

RadButton used as ImageButton RadButton with Background Image and Text Disabled RadButton
Background Image and Primary Icon
Background Image and Text
Background Image and Primary Icon / Background Image and Text
Background Image and Text
Background Image and Text
Background Image and Text
Background Image, Primary Icon and Text

The RadButton control can be used as an ImageButton. You can use any image type supported by the browser. You can easily combine Image, Icons and Text to achieve the desired button appearance. The following properties are the most important ones when using the Telerik Button control as an image button:

  • Width—the value should be equal to the width of the image.
  • Height—the value should be equal to the height of the image.
  • Image—inner property that controls all the Image related properties:
    • EnableImageButton—used to explicitly enable the image button functionality. This comes in handy when you want to set the image through the RadButton's CssClass property and/or use an image sprite for the hovered and pressed image states.
    • ImageUrl—the absolute or relative path to the image used as a button. This, or the CssClass property must be set in order for the image to appear.
    • IsBackgroundImage—controls how the image will be used. In case the user wants to display an Icon and/or Text on the button, the IsBackgroundImage should be set to true.
    • DisabledImageUrl—specifies the image of the button when it is disabled (its Enabled property is set to false).
<telerik:RadButton ID="RadButton1" runat="server" Width="37px" Height="36px" Text="Download"
    Enabled="false">
    <Image ImageUrl="images/cb_download.png" DisabledImageUrl="images/cb_download_d.png"/>
</telerik:RadButton>
  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <table cellpadding="0" cellspacing="0" width="100%" class="imgBtnTable">
            <tr>
                <th>RadButton used as ImageButton</th>
                <th>RadButton with Background Image and Text</th>
                <th>Disabled RadButton</th>
            </tr>
            <tr>
                <td class="styledBorder">
                    <telerik:RadButton RenderMode="Lightweight" ID="imgBtn3" runat="server" Width="37px" Height="36px" Text="Download">
                        <Image ImageUrl="images/cb_download.png"></Image>
                    </telerik:RadButton>
                </td>
                <td class="styledBorder">
                    <span class="txtImg">
                        <telerik:RadButton RenderMode="Lightweight" ID="btnBgrImg1" runat="server" Width="37px" Height="36px" ToolTip="Download">
                            <Image ImageUrl="images/cb_dl_empty.png" IsBackgroundImage="true"></Image>
                            <Icon PrimaryIconUrl="images/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>
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Width="37px" Height="36px" Text="Download"
                        Enabled="false">
                        <Image ImageUrl="images/cb_download.png" DisabledImageUrl="images/cb_download_d.png"></Image>
                    </telerik:RadButton>
                </td>
            </tr>
            <tr>
                <td class="styledBorder">
                    <telerik:RadButton RenderMode="Lightweight" ID="imgBtn4" runat="server" Width="42px" Height="43px" Text="GO!">
                        <Image ImageUrl="images/cb_go.png"></Image>
                    </telerik:RadButton>
                </td>
                <td class="styledBorder">
                    <span class="txtImg">
                        <telerik:RadButton RenderMode="Lightweight" ID="btnBgrImg2" runat="server" Width="42px" Height="43px" ForeColor="Black"
                            HoveredCssClass="goButtonClassHov" Text="GO!">
                            <Image ImageUrl="images/cb_go_empty.png" IsBackgroundImage="true"></Image>
                        </telerik:RadButton>
                    </span><span class="text">Background Image and Text</span>
                </td>
                <td>
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton2" runat="server" Width="42px" Height="43px" Text="GO!"
                        Enabled="false">
                        <Image ImageUrl="images/cb_go.png" DisabledImageUrl="images/cb_go_d.png"></Image>
                    </telerik:RadButton>
                </td>
            </tr>
            <tr>
                <td class="styledBorder">
                    <telerik:RadButton RenderMode="Lightweight" ID="imgBtn5" runat="server" Width="58px" Height="59px" Text="Play">
                        <Image ImageUrl="images/cb_play.png"></Image>
                    </telerik:RadButton>
                </td>
                <td class="styledBorder">
                    <span class="txtImg">
                        <telerik:RadButton RenderMode="Lightweight" ID="btnBgrImg3" runat="server" Width="58px" Height="59px" ToolTip="Play">
                            <Image ImageUrl="images/cb_square_empty.png" IsBackgroundImage="true"></Image>
                            <Icon PrimaryIconUrl="images/cb_play_arrow.png" PrimaryIconWidth="23px" PrimaryIconHeight="36px"
                                PrimaryIconTop="12px" PrimaryIconLeft="19px"></Icon>
                        </telerik:RadButton>
                        <telerik:RadButton RenderMode="Lightweight" ID="btnBgrImg4" runat="server" Width="58px" Height="59px" Text="PLAY"
                            ForeColor="Black" HoveredCssClass="goButtonClassHov">
                            <Image ImageUrl="images/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>
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton3" runat="server" Width="58px" Height="59px" Text="Play"
                        Enabled="false">
                        <Image ImageUrl="images/cb_play.png" DisabledImageUrl="images/cb_play_d.png"></Image>
                    </telerik:RadButton>
                </td>
            </tr>
            <tr>
                <td class="styledBorder">
                    <telerik:RadButton RenderMode="Lightweight" ID="imgBtn6" runat="server" Width="80px" Height="80px" Text="Next">
                        <Image ImageUrl="images/cb_next.png" HoveredImageUrl="images/cb_nextHov.png"></Image>
                    </telerik:RadButton>
                </td>
                <td class="styledBorder">
                    <span class="txtImg">
                        <telerik:RadButton RenderMode="Lightweight" ID="btnBgrImg5" runat="server" Width="80px" Height="80px" Text="Next >>>"
                            ForeColor="White" HoveredCssClass="prevButtonClassHov">
                            <Image ImageUrl="images/cb_black_square.png" HoveredImageUrl="images/cb_blue_square.png"
                                IsBackgroundImage="true"></Image>
                        </telerik:RadButton>
                    </span><span class="text">Background Image and Text</span>
                </td>
                <td>
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton4" runat="server" Width="80px" Height="80px" Text="Next"
                        Enabled="false">
                        <Image ImageUrl="images/cb_next.png" DisabledImageUrl="images/cb_next_d.png" HoveredImageUrl="images/cb_nextHov.png"></Image>
                    </telerik:RadButton>
                </td>
            </tr>
            <tr>
                <td class="styledBorder">
                    <telerik:RadButton RenderMode="Lightweight" ID="imgBtn7" runat="server" Width="80px" Height="80px" Text="Previous">
                        <Image ImageUrl="images/cb_prev.png" HoveredImageUrl="images/cb_prevHov.png"></Image>
                    </telerik:RadButton>
                </td>
                <td class="styledBorder">
                    <span class="txtImg">
                        <telerik:RadButton RenderMode="Lightweight" ID="btnBgrImg6" runat="server" Width="80px" Height="80px" Text="<< Previous"
                            ForeColor="White" HoveredCssClass="prevButtonClassHov">
                            <Image ImageUrl="images/cb_black_square.png" HoveredImageUrl="images/cb_blue_square.png"
                                IsBackgroundImage="true"></Image>
                        </telerik:RadButton>
                    </span><span class="text">Background Image and Text</span>
                </td>
                <td>
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton5" runat="server" Width="80px" Height="80px" Text="Previous"
                        Enabled="false">
                        <Image ImageUrl="images/cb_prev.png" DisabledImageUrl="images/cb_prev_d.png" HoveredImageUrl="images/cb_prevHov.png"></Image>
                    </telerik:RadButton>
                </td>
            </tr>
            <tr>
                <td class="styledBorder">
                    <telerik:RadButton RenderMode="Lightweight" ID="imgBtn2" runat="server" Width="101px" Height="29px" Text="Add to Cart">
                        <Image ImageUrl="images/cb_cart_text.png"></Image>
                    </telerik:RadButton>
                </td>
                <td class="styledBorder">
                    <span class="txtImg">
                        <telerik:RadButton RenderMode="Lightweight" ID="btnBgrImg7" runat="server" Width="101px" Height="29px" Text="Shopping Cart"
                            ForeColor="Black" HoveredCssClass="goButtonClassHov" CssClass="img-text-shopping-btn">
                            <Image ImageUrl="images/cb_empty_01.png" IsBackgroundImage="true"></Image>
                        </telerik:RadButton>
                    </span><span class="text">Background Image and Text</span>
                </td>
                <td>
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton6" runat="server" Width="101px" Height="29px" Text="Add to Cart"
                        Enabled="false">
                        <Image ImageUrl="images/cb_cart_text.png" DisabledImageUrl="images/cb_cart_text_d.png"></Image>
                    </telerik:RadButton>
                </td>
            </tr>
            <tr>
                <td class="styledBorder">
                    <telerik:RadButton RenderMode="Lightweight" ID="imgBtn1" runat="server" Width="120px" Height="26px" Text="Add to Cart">
                        <Image ImageUrl="images/cb_cart_button.png"></Image>
                    </telerik:RadButton>
                </td>
                <td class="styledBorder">
                    <span class="txtImg">
                        <telerik:RadButton RenderMode="Lightweight" ID="btnBgrImg8" runat="server" Width="120px" Height="26px" Text="Shopping Cart"
                            ForeColor="Black" HoveredCssClass="goButtonClassHov" Style="padding-left: 20px" CssClass="img-text-shopping-btn">
                            <Image ImageUrl="images/cb_empty_02.png" IsBackgroundImage="true"></Image>
                            <Icon PrimaryIconUrl="images/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>
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton7" runat="server" Width="120px" Height="26px" Text="Add to Cart"
                        Enabled="false">
                        <Image ImageUrl="images/cb_cart_button.png" DisabledImageUrl="images/cb_cart_button_d.png"></Image>
                    </telerik:RadButton>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance