Creating Round Corner Buttons
This articles describes about the creating round corner button using Telerik Controls. Though Telerik comes with different skins and customiztion can be only done on these skins. This article explains to override Telerik css and use our own Custom images for creating Round Corners buttons.
Creating Round Corners Buttons:
Round Corners Buttons can be created in Two ways:
Round Corner with three Images/parts
This involves in creating button with three parts Left Curve, center repeting part for the Length of the text and Right curve.
The explains in detail.
Round Corner with two Images/parts
This involves in creating button with two parts Left Curve with Longer width and Right curve.
The explains in detail.
Customizing the Telerik Button for RoundCorner:
Telerik uses Second type of creating round corners with two Images/parts. Telerik Button has the default skin embeded to it. Inorder to use custom images, it is required to override the css of this Telerik Button.
.rbSkinnedButton and .rbDecorated are the two class we will override to create the Roundcornets Code snippet with explanation :
Styles Change
<style type="text/css">
/***Class to override the Right Curve***/
.nRoundCorner .rbSkinnedButton
{
background-image: url('FinalImages/imgrightcurve.png') !important;
background-position: right top !important;
background-repeat: no-repeat;
height: 23px;
}
/***Class to override the Left Curve***/
.nRoundCorner .rbDecorated
{
background-image: url('FinalImages/imgleftcurve.png') !important;
background-position: left top !important;
background-repeat: repeat-x;
height: 23px;
color: #fff;
font: normal 11px verdana;
cursor: pointer;
vertical-align: text-top;
text-align: center;
}
</style>
HTML code for Telerik Button
<table cellspacing="2" cellpadding="5" border="0" class="nRoundCorner">
<tr>
<td colspan="2" class="Header">
Round Corner Implementation in Telerik Buttons
</td>
</tr>
<tr>
<td>
<telerik:RadButton ID="btnHome" runat="server" Text="Welcome to DotNetSpider">
</telerik:RadButton>
</td>
</tr>
</table>Additional Features:
In case icons has to be placed on this button/Images, We have options for it. Icon Template in Telerik Button is used for this customization.
There are two options
1. Primary Icon - placing the Icon on Left side using the PrimaryIconUrl property
2. Secondary Icon - placing the Icon on Right side using the SeocondayIconUrl property
HTML code for Telerik Button
<table cellspacing="2" cellpadding="5" border="0" class="nRoundCorner">
<tr>
<td colspan="2" class="Header">
Round Corner Implementation for Adding Icon
</td>
</tr>
<tr>
<td>
<telerik:RadButton ID="RadButton1" runat="server" Text="Welcome to DotNetSpider">
<Icon PrimaryIconUrl="imgHome.png" PrimaryIconCssClass="classCart" />
</td>
</tr>
</table>
Screen Output:
Limitation:
Left Image then we get white background for the exceeding characters. if we repeat that Left Image, then We will have two Left curves in the button.
Resolution: Create the Left Curve Image of Longer Width say (500 * 24).
Resolution: You need to add the style of :active, :focus for rbSkinnedButton, rbDecorated class. Fix works for IE 9 and above.