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

Sign Up Form

Subscribe to Newsletter
Subscribe to RSS Feeds

This example demonstrates how you can use RadButton to customize the look of your SignUp form. You can use the client-side or server-side API of the control to submit the page, and collect the information entered.

Two RadButton controls with ButtonType="ToggleButton" and ToggleType="Radio" are used to determine the gender of the user. Two other toggle buttons (RadButton with ButtonType="ToggleButton" and ToggleType="CheckBox") are used to subscribe the user for the provided services.

The remaining buttons are image buttons where the image is either used as background, or represents the button itself (ImageButton).

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ 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 no-bg">
    <div class="signUpScenario">
        <div class="signUpHeader">
            <div class="signButton">
                <telerik:RadButton RenderMode="Lightweight" ID="ImageButton" runat="server" Width="75px" Height="22px" Text="Click Here to Sign in" Skin="Default">
                    <Image ImageUrl="images/signInBtn.png" HoveredImageUrl="images/signInBtnHov.png"></Image>
                </telerik:RadButton>
            </div>
        </div>
        <div class="signUpBody">
            <div class="formElements">
                <label for="Name">
                    Name:</label>
                <input type="text" class="itext" />
            </div>
            <div class="formElements">
                <label for="Password">
                    Password:</label>
                <input type="password" class="itext" />
            </div>
            <div class="formElements">
                <label for="Gender">
                    Gender:</label>
                <telerik:RadButton RenderMode="Lightweight" ID="btnFemale" runat="server" ButtonType="ToggleButton" ToggleType="Radio"
                    AutoPostBack="false" Text="Female" Width="75px" Height="22px" ForeColor="Black"
                    GroupName="Gender" Skin="Default">
                    <ToggleStates>
                        <telerik:RadButtonToggleState ImageUrl="images/btnHov.png" Selected="true" IsBackgroundImage="true">
                        </telerik:RadButtonToggleState>
                        <telerik:RadButtonToggleState ImageUrl="images/btn.png" HoveredImageUrl="images/btnHov.png"
                            IsBackgroundImage="true"></telerik:RadButtonToggleState>
                    </ToggleStates>
                </telerik:RadButton>
                <telerik:RadButton RenderMode="Lightweight" ID="btnMale" runat="server" ButtonType="ToggleButton" ToggleType="Radio"
                    AutoPostBack="false" Text="Male" Width="75px" Height="22px" ForeColor="Black"
                    GroupName="Gender" Skin="Default">
                    <ToggleStates>
                        <telerik:RadButtonToggleState ImageUrl="images/btnHov.png" Selected="true" IsBackgroundImage="true">
                        </telerik:RadButtonToggleState>
                        <telerik:RadButtonToggleState ImageUrl="images/btn.png" HoveredImageUrl="images/btnHov.png"
                            IsBackgroundImage="true"></telerik:RadButtonToggleState>
                    </ToggleStates>
                </telerik:RadButton>
            </div>
            <div class="subscription">
                <div>
                    <telerik:RadButton RenderMode="Lightweight" ID="btnNewsletter" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
                        AutoPostBack="false" Width="38px" Height="22px" ToolTip="Subscribe to Newsletter" Skin="Default">
                        <Icon PrimaryIconCssClass="rbMail" PrimaryIconTop="3px" PrimaryIconLeft="10px"></Icon>
                        <ToggleStates>
                            <telerik:RadButtonToggleState ImageUrl="images/smallBtnHov.png" Selected="true" IsBackgroundImage="true">
                            </telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState ImageUrl="images/smallBtn.png" HoveredImageUrl="images/smallBtnHov.png"
                                IsBackgroundImage="true"></telerik:RadButtonToggleState>
                        </ToggleStates>
                    </telerik:RadButton>
                    <span>Subscribe to Newsletter</span>
                </div>
                <div style="padding-top: 5px">
                    <telerik:RadButton RenderMode="Lightweight" ID="btnRss" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
                        AutoPostBack="false" Width="38px" Height="22px" ForeColor="Black" ToolTip="Subscribe to RSS Feeds" Skin="Default">
                        <Icon PrimaryIconCssClass="rbRSS" PrimaryIconTop="3px" PrimaryIconLeft="10px"></Icon>
                        <ToggleStates>
                            <telerik:RadButtonToggleState ImageUrl="images/smallBtnHov.png" Selected="true" IsBackgroundImage="true">
                            </telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState ImageUrl="images/smallBtn.png" HoveredImageUrl="images/smallBtnHov.png"
                                IsBackgroundImage="true"></telerik:RadButtonToggleState>
                        </ToggleStates>
                    </telerik:RadButton>
                    <span>Subscribe to RSS Feeds</span>
                </div>
            </div>
            <div class="signUp">
                <telerik:RadButton RenderMode="Lightweight" ID="RadButton5" runat="server" Width="112px" Height="28px" Text="Submit the Form to Sign Up" Skin="Default">
                    <Image ImageUrl="images/signUpBtn.png" HoveredImageUrl="images/signUpBtnHov.png"></Image>
                </telerik:RadButton>
                <telerik:RadButton RenderMode="Lightweight" ID="RadButton6" runat="server" Width="89px" Height="22px" Text="Cancel" Skin="Default">
                    <Image ImageUrl="images/cancel.png" HoveredImageUrl="images/cancelHov.png"></Image>
                </telerik:RadButton>
            </div>
        </div>
    </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance