Lately we’ve been receiving one question quite often - is it possible to increase the RadButton and / or RadFormDecorator’s button default height.

Usually people are trying to set the needed value to the Height property:

<telerik:RadFormDecorator runat="server" DecoratedControls="All" />
<asp:Button runat="server" Text="RadForm Button" Height="40" />

<
telerik:RadButton runat="server" Text="RadButton" Height="40">

</telerik:RadButton>
 

But the result is not pretty:
     Buttons with custom height set

By default the RadButton as well as ASP Buttons and inputs of type=”button” decorated by the RadFormDecorator are visually built with sprite images that apply a specific gradient to the element. The sprite image has a specific height, which means you cannot just change the button’s height property because the sprite image will be either cut off or tile several times, producing unwanted results.

The problem is different in the two controls. In the case of RadButton - it has a built-in default height of 22px or 65px, and when the height property is used it tries to apply the correct part of the sprite. As it is 25px less than the one available, it looks cut.

To make RadButton look nice again, you have to create custom sprite for the Buttons part only. It consists of two parts – wider left part for the base part of the button and a right part of 4px to complete the button. Both parts have rounded corners and specific gradient. In our online help section there is an article - RadButton Custom Height Tutorial with an example how to change sprite and CSS to achieve the custom height.

If your site will only target newer browsers, then there is an easier solution - CSS3! Some people will find it hard to create and edit the sprite image to achieve the desired effect. Why not use CSS 3 then? You could achieve all visual styles - rounded corners, gradients and shadows with a few lines of CSS code. All current mobile and desktop browsers support it, so it is not a bad idea to try this solution as well. We have a CSS3 RadButtons demo showing how you could put rounded corners, shadows and gradients, and even make the button to appear as a circle.

Both resources so far were related to the RadButton, so here is a simple sample code example showing how to make a RadFormDecorator CSS button:

<style type="text/css">
    .styleMe
    {
        border: 2px solid #3af9eb;
        border-radius: 4px;
        box-shadow: 2px 3px 4px #555;
        height: 35px;
        line-height: 35px;
        font-size: 15px;
        background: -moz-linear-gradient(top, #d1f9f6 0%, #07e3d1 100%); /* FF3.6+ */
        background: -webkit-linear-gradient(top, #d1f9f6 0%,#07e3d1 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #d1f9f6 0%,#07e3d1 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #d1f9f6 0%,#07e3d1 100%); /* IE10+ */
        background: linear-gradient(top, #d1f9f6 0%,#07e3d1 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1f9f6', endColorstr='#07e3d1',GradientType=0 ); /* IE6-8 */
    }
 
    .styleMe:hover
    {
        border: 2px solid #04897e;
        cursor: pointer;
        background: -moz-linear-gradient(top, #07e3d1 0%, #d1f9f6 100%); /* FF3.6+ */
        background: -webkit-linear-gradient(top, #07e3d1 0%,#d1f9f6 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #07e3d1 0%,#d1f9f6 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #07e3d1 0%,#d1f9f6 100%); /* IE10+ */
        background: linear-gradient(top, #07e3d1 0%,#d1f9f6 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#07e3d1', endColorstr='#d1f9f6',GradientType=0 ); /* IE6-8 */
    }
</style>
 
<asp:Button ID="Button1" runat="server" Text="I'm styled differently" CssClass="styleMe">
</asp:Button>

 

The above code will style our button in the following way:

RadFormDecorator CSS Button

Fast and simple – the button has rounded corners, box shadow, and a gradient. The RadFormDecorator will ignore these buttons so the styles you define will not interfere with other elements on the page. Simply copy and paste the above <style> definitions, change the "styleMe" class name to match your naming convention, change the two colors "#07e3d1" and "#d1f9f6" to match your site theme and you're done!


About the Author

Stoyan Stratev

is a technical lead in the Windows 8 HTML team at Telerik. He joined the company in 2005 as a web developer, specializing in the integration of the Telerik components in third-party solutions, such as DotNetNuke and SharePoint. He led one of the ASP.NET AJAX teams before moving on to the Windows 8 division.

Related Posts

Comments