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

Rotated Buttons

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>
<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" CssClass="demo-container no-bg">
        <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>

Support & Learning Resources

Find Assistance