Button - Rotated Buttons

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

You can rotate a RadButton in the desired direction, just like any other HTML element. The rotation is achieved through CSS. Most browser use different CSS code to rotate an element, so having consistent look under different browsers requires using browser-specific rules.

Click on any of the buttons to browse the map. They are rotated using some CSS code. Here it is:

The "North" Button is not rotated.

"East" Button

    top: 190px;
    right: -11px;
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
    -moz-transform: rotate(90deg); /* Firefox */
    -o-transform: rotate(90deg); /* Opera */
    -ms-transform: rotate(90deg); /* IE9 */
/* Internet Explorer fix */
.mapEast .EastBtn
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    right: -7px\9;

"West" Button

    top: 190px;
    left: -13px;
    -webkit-transform: rotate(270deg); /* Safari and Chrome */
    -moz-transform: rotate(270deg); /* Firefox */
    -o-transform: rotate(270deg); /* Opera */
    -ms-transform: rotate(270deg); /* IE9 */
/* Internet Explorer fix */
.mapWest .WestBtn
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    left: 14px\9;

"South" Button

    bottom: 1px;
    right: 395px;
    -webkit-transform: rotate(180deg); /* Safari and Chrome */
    -moz-transform: rotate(180deg); /* Firefox */
    -o-transform: rotate(180deg); /* Opera */
    -ms-transform: rotate(180deg); /* IE9 */
/* Internet Explorer fix */
.mapSouth .SouthBtn
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

Remove filters for IE9 because it does not need them

/* Remove filter in IE9 */
._Telerik_IE9 .mapEast .EastBtn,
._Telerik_IE9 .mapSouth .SouthBtn,
._Telerik_IE9 .mapWest .WestBtn
    filter: none;
  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true"  %>

<!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" />
    <script src="scripts.js" type="text/javascript"></script>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <asp:Panel ID="Panel1" runat="server">
        <div id="divMap" class="mapContainer" style="background-position: 0px 0px;">
            <div class="mapNorth">
                <telerik:RadButton RenderMode="Lightweight" ID="rbNorth" runat="Server" Text="North" ToolTip="Go North" AutoPostBack="false"
            <div class="mapEast">
                <telerik:RadButton RenderMode="Lightweight" ID="rbEast" runat="Server" Text="East" CssClass="EastBtn" ToolTip="Go East"
                    AutoPostBack="false" OnClientClicking="telerikDemo.moveMap">
            <div class="mapSouth">
                <telerik:RadButton RenderMode="Lightweight" ID="rbSouth" runat="Server" Text="South" CssClass="SouthBtn" ToolTip="Go South"
                    AutoPostBack="false" OnClientClicking="telerikDemo.moveMap">
            <div class="mapWest">
                <telerik:RadButton RenderMode="Lightweight" ID="rbWest" runat="Server" Text="West" CssClass="WestBtn" ToolTip="Go West"
                    AutoPostBack="false" OnClientClicking="telerikDemo.moveMap">

Find Assistance

Help Us Improve

Was this example helpful?