Button - CSS3 Buttons

Simple RadButton with CSS3 rounded corners applied. This is done via the border-radius property.
Simple RadButton with CSS3 rounded corners and box shadow applied (border-radius and box-shadow properties). The button height is set through the control's property and the default borders are removed with CSS (the border property).
Simple circle RadButton. This is usually achieved with border-radius of 45 pixels with equal width and height, but because of RadButton specific rendering and CSS the Width and Height properties of element are set to 42px. The second button also utilizes the gradient property.
RadButton with Gradient (linear-gradient property).
This RadButton's ContentTemplate has an asp:Checkbox inside and rounded corners (border-radius), shadows (box-shadow) and gradient (linear-gradient) applied.
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example shows how to achieve rich look and feel for a RadButton by just using CSS3 techniques and CSS gradients instead of image sprites.

CSS3 is not supported by all browsers that are still in use. Some properties are also supported differently across different browsers.

This demo uses some of the most popular CSS3 properties such as border-radius (which applies rounded corners to the element) and box-shadow (which applies shadows around the element).

Gradients are not achieved only through the linear-gradient W3C-compliant property. In order to work in some older browsers, some browser-specific properties are used as well.

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

<%@ 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>
                <td class="center">
                    <telerik:RadButton RenderMode="Lightweight" ID="rb1" runat="server" Text="RadButton with rounded corners"
                        ButtonType="LinkButton" CssClass="css3Simple">
                    </telerik:RadButton>
                </td>
                <td>Simple RadButton with CSS3 rounded corners applied. This is done via the <em>border-radius</em>
                    property.
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="RadButton with box shadow"
                        ButtonType="LinkButton" CssClass="css3Shadows" Height="30px">
                    </telerik:RadButton>
                </td>
                <td>Simple RadButton with CSS3 rounded corners and box shadow applied (<em>border-radius</em>
                    and <em>box-shadow</em> properties). The button height is set through the control&#39;s
                property and the default borders are removed with CSS (the <em>border</em> property).
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton2" runat="server" ButtonType="LinkButton" CssClass="css3Circle"
                        Height="42" Width="42">
                        <Icon PrimaryIconCssClass="rbOk" PrimaryIconLeft="5" PrimaryIconTop="7"></Icon>
                    </telerik:RadButton>
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton7" runat="server" ButtonType="LinkButton" CssClass="css3Circle css3CircGrad"
                        Height="42" Width="42">
                    </telerik:RadButton>
                </td>
                <td>Simple circle RadButton. This is usually achieved with <em>border-radius</em> of
                45 pixels with equal width and height, but because of RadButton specific rendering
                and CSS the Width and Height properties of element are set to 42px.
                The second button also utilizes the <em>gradient</em> property.
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton5" runat="server" Text="RadButton with Gradient"
                        ButtonType="LinkButton" CssClass="css3Grad" Height="45">
                    </telerik:RadButton>
                </td>
                <td>RadButton with Gradient (<em>linear-gradient</em> property).
                </td>
            </tr>
            <tr>
                <td class="center">
                    <telerik:RadButton RenderMode="Lightweight" ID="RadButton6" runat="server" ButtonType="LinkButton" CssClass="css3Cont"
                        Height="65">
                        <ContentTemplate>
                            <asp:CheckBox runat="server" Text="Privacy Policy Agreement"></asp:CheckBox>
                            <em>By checking the box above I indicate that I have read, understand and accept the
                            Privacy Policy. </em>
                        </ContentTemplate>
                    </telerik:RadButton>
                </td>
                <td>This RadButton&#39;s ContentTemplate has an asp:Checkbox inside and rounded corners
                (<em>border-radius</em>), shadows (<em>box-shadow</em>) and gradient (<em>linear-gradient</em>)
                applied.
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?