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

.mapEast
{
    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

.mapWest
{
    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

.mapSouth
{
    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>
</head>
<body>
    <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"
                    OnClientClicking="telerikDemo.moveMap">
                </telerik:RadButton>
            </div>
            <div class="mapEast">
                <telerik:RadButton RenderMode="Lightweight" ID="rbEast" runat="Server" Text="East" CssClass="EastBtn" ToolTip="Go East"
                    AutoPostBack="false" OnClientClicking="telerikDemo.moveMap">
                </telerik:RadButton>
            </div>
            <div class="mapSouth">
                <telerik:RadButton RenderMode="Lightweight" ID="rbSouth" runat="Server" Text="South" CssClass="SouthBtn" ToolTip="Go South"
                    AutoPostBack="false" OnClientClicking="telerikDemo.moveMap">
                </telerik:RadButton>
            </div>
            <div class="mapWest">
                <telerik:RadButton RenderMode="Lightweight" ID="rbWest" runat="Server" Text="West" CssClass="WestBtn" ToolTip="Go West"
                    AutoPostBack="false" OnClientClicking="telerikDemo.moveMap">
                </telerik:RadButton>
            </div>
        </div>
    </asp:Panel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?