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
Isolate this demo as a stand-alone application

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">
    <ImageImageUrl="images/cb_download.png"DisabledImageUrl="images/cb_download_d.png"/>
</telerik:RadButton>
<%@ 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>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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 ID="btnBgrImg7" runat="server" Width="101px" Height="29px" Text="Shopping Cart"
                            ForeColor="Black" HoveredCssClass="goButtonClassHov">
                            <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 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 ID="imgBtn1" runat="server" Width="114px" 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 ID="btnBgrImg8" runat="server" Width="104px" Height="26px" Text="Shopping Cart"
                            ForeColor="Black" HoveredCssClass="goButtonClassHov" Style="padding-left: 10px">
                            <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 ID="RadButton7" runat="server" Width="114px" 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>

Find Assistance

Help Us Improve

Was this example helpful?