How to set a custom height for RadButton and RadFormDecorated buttons in ASP.NET AJAX

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:
    

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:

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

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!