If the Width property of a RadButton is set, its appearance in the Visual Studio 2012 Design view will be broken.

The icons sprite starts showing when the width is sufficiently large, test with different values, e.g. 80px, 100px, 200px, 400px, etc.

Currently when cookiless session is enabled and RadButton with custom image is used the Image is not displayed, until the button is hovered.

ASPX:

        <telerik:RadButton ID="ButtunTest" runat="server" Icon-PrimaryIconUrl="~/Examples7/eClose.png" Text="Testbutton"
            Width="200px" UseSubmitBehavior="False" />

Web.Config:

  <system.web>
        <sessionState cookieless="true"></sessionState>
  </system.web>

The workaround is to override the background image of the button:

    <style>
        .RadButton.RadButton_Default.rbSkinnedButton .rbPrimaryIcon {
            background-image: url("/RadControlsWebSite2/Examples7/eClose.png");
        }
    </style>

 For the time being the following workaround can be used:

ASPX:

       <telerik:RadButton ID="RadButton1" runat="server" Text="Click" NavigateUrl="http://www.google.bg" Target="_blank" ButtonType="LinkButton">
        </telerik:RadButton>
        <script>
            Telerik.Web.UI.Button.NavigationFunctionality.prototype._handleNavigateUrl = function () {
                $ = $telerik.$;
                var that = this,
                    target = that.options.navigateTarget,
                    url = that.options.navigateUrl;

                if (target && target == "_blank")
                    window.open(url);
                if (target && target == "_parent")
                    window.parent.location.href = url;
                if (target && target == "_top")
                    window.parent.location.href = url;
                else if (!target || target == "_self")
                    window.location.href = url;
                else {
                    var targetFrame = $("iframe[name='" + target + "']").get(0)
                                        || $("frame[name='" + target + "']").get(0)
                                        || $("#" + target).get(0);

                    if (targetFrame && targetFrame.tagName.toLowerCase().indexOf("frame") > -1)
                        targetFrame.setAttribute("src", url);
                }
            }
        </script>

Currently disabled RadButton doesn't have a border for Silk skin. For the time being the border can be set manually:

        <telerik:RadButton ID="RadButton1" runat="server" Skin="Silk" Text="Submit" BorderColor="#C9C9C9" BorderWidth="1px" Enabled="false">
        </telerik:RadButton>

 Currently the value of RadButton's property 'Width' is not applied correctly and its width is not as specified.

A workaround is using ButtonType=SkinnedButton or using the Glow or BlackMetroTouch skin.
You can use the following CSS workaround to remove the additional opacity Safari adds for the input that results in the sprite being visible:
        .rbDisabled .rbDecorated {
            opacity: 1;
        }

The workaround is to override the background image of the button:

CSS:

    <style>
        .RadButton.RadButton_Default.rbLinkButton .rbPrimaryIcon {
            background-image: url("images/Groups (16x16).png");
        }
    </style>

ASPX:

       <telerik:RadButton ID="RadButton1" runat="server" ButtonType="LinkButton" Text="Click" Skin="Default">
            <Icon PrimaryIconUrl="images/myImage (16x16).png" PrimaryIconTop="2" PrimaryIconLeft="2" />
        </telerik:RadButton>

For the time being the following workaround can be used:

CSS:

    <style>
     .RadButton.RadButton_Metro.rbSkinnedButton:focus input.rbDecorated {
            background-color: #25A0DA !important;
        }
    </style>

        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Metro"></telerik:RadSkinManager>
        <telerik:RadTextBox ID="RadTextBox1" runat="server"></telerik:RadTextBox>
        <telerik:RadButton ID="RadButton1" runat="server" Text="click" />

For the time being the following CSS workaround can be used:

CSS:

    <style>
        html .RadButton.RadButton_Glow.RadButton.rbDisabled,
        html .RadButton.RadButton_Glow.RadButton.rbDisabled:hover,
        html .RadButton.RadButton_Glow.RadButton.rbDisabled:active,
        html .RadButton.RadButton_Glow.RadButton.rbDisabled:focus,
        html .RadButton.RadButton_Silk.RadButton.rbDisabled,
        html .RadButton.RadButton_Silk.RadButton.rbDisabled:hover,
        html .RadButton.RadButton_Silk.RadButton.rbDisabled:active,
        html .RadButton.RadButton_Silk.RadButton.rbDisabled:focus,
        html .RadButton.RadButton_Metro.RadButton.rbDisabled,
        html .RadButton.RadButton_Metro.RadButton.rbDisabled:hover,
        html .RadButton.RadButton_Metro.RadButton.rbDisabled:active,
        html .RadButton.RadButton_Metro.RadButton.rbDisabled:focus {
            background-color: transparent;
            background-image: none;
            border: none;
            box-shadow: none;
        }
    </style>

ASPX:

        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" Skin="Glow"></telerik:RadSkinManager>
        <telerik:RadButton ID="RadButton1" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Checked="true" Enabled="true" />
        <telerik:RadButton ID="RadButton2" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Checked="true" Enabled="false" />
        <telerik:RadButton ID="RadButton3" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Checked="false" Enabled="true" />
        <telerik:RadButton ID="RadButton4" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Checked="false" Enabled="false" />

The width of the RadButton is higher than the actual one with Silk and Glow skins.

        <telerik:RadButton ID="RadButton1" runat="server" Skin="Silk" Width="300px"></telerik:RadButton>
        <br />
        <telerik:RadButton ID="RadButton2" runat="server" Skin="Glow" Width="300px"></telerik:RadButton>
        <br />
        <telerik:RadButton ID="RadButton3" runat="server" Skin="Default" Width="300px"></telerik:RadButton>
        <br />

Resolution:

    <style>
        span.RadButton {
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>

For the time being the following CSS workaround can be used:

CSS:

        <style>
            .RadButton.RadButton_Glow.rbSkinnedButton {
                vertical-align: top;
            }
        </style>
Where Glow is the name of the skin that has larger dimensions (e.g., Silk, Glow, etc).
ASPX:

       <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" Skin="Glow"></telerik:RadSkinManager>
        <telerik:RadTextBox runat="server" ID="txtAdminUser" />
        <telerik:RadButton runat="server" ID="btn1" Text="Add" ButtonType="StandardButton" />

Currently RadButton configured as a toggle radio/checkbox button doesn't accept custom icons to be used because it already has predefined icons. For the time being the ButtonType property can be set to "StandardButton" and its background image can be hidden. For example:
CSS:
<style>
    .RadButton_Default.rbSkinnedButton,
    .RadButton_Default .rbDecorated,
    .RadButton_Default.rbVerticalButton,
    .RadButton_Default.rbVerticalButton .rbDecorated,
    .RadButton_Default .rbSplitRight,
    .RadButton_Default .rbSplitLeft {
        background-image: none !important;
    }
</style>
ASPX:
<telerik:RadButton ID="RadButton3" runat="server" GroupName="OverSampling"
    Text="" ButtonType="StandardButton" ToggleType="Radio" Checked="false" AutoPostBack="false">
    <ToggleStates>
        <telerik:RadButtonToggleState Text="Yes" PrimaryIconUrl="radio6-on.png" Selected="true" />
        <telerik:RadButtonToggleState Text="Yes" PrimaryIconUrl="radio6-off.png" />
    </ToggleStates>
</telerik:RadButton>
 
<telerik:RadButton ID="RadButton4" runat="server" GroupName="OverSampling"
    Text="No" ButtonType="StandardButton" ToggleType="Radio" AutoPostBack="false" Checked="true">
    <ToggleStates>
        <telerik:RadButtonToggleState PrimaryIconUrl="radio6-on.png" Selected="true" />
        <telerik:RadButtonToggleState PrimaryIconUrl="radio6-off.png" />
    </ToggleStates>
</telerik:RadButton>