<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<
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'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'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
>