Need to create different height buttons

[Selva M]

Hi,
  I need to create buttons with variable heights and color theme as in my attached sample image. I succeeded creating various color theme but i'm not able to change the height of the button as its mentioned in button.css. Can anybody help me out to get this done.

Thanks,
Selva

[Shinu]

Hello Selva,

You can use RadButton as an Image Button to achieve the required appearence. Take a look at the following documentation for more on this.
RadButton as an Image Button

Thanks,
Shinu.

[Selva M]

Hi Shinu,
  Thanks for the reply. Is there any possiblity to implement the same using Standard button, as there's need to apply localization and change the icons based on some conditions..

Thanks,
Selva

[Vincent]

Yes, I am also having the same problem, it's pretty hard to overwrite the button.css. I tried different approach as mentioned on telerik blog, it doesn't work. 

see my question

http://www.telerik.com/community/forums/aspnet-ajax/button/how-to-overwrite-this-css.aspx

[Bozhidar]

Hello Selva,

To have default buttons with different height you should create your own sprite with the necessary images and a piece of CSS code to position the new height button dimensions and background positions.

Vincent, the provided code works as expected. Attached is button.gif showing the result in the browser from the code provided at: http://www.telerik.com/community/forums/aspnet-ajax/button/how-to-overwrite-this-css.aspx.

You could find also attached HeightProjectFiles.zip containing a small project with the same CSS and a sprite image that creates button with 40px height. If you use the same approach you could create as many different height buttons as you need.


All the best,
Bojo
the Telerik team

[Selva M]

Hi Bojo, 
  Thanks for the solution. I need one more thing in that. I also need to resize the icon width and height for the same button. How to achieve that result. 

Thanks,
Selva

[Bozhidar]

Hi Selva,

In the RadButton Icon resources we have all embedded icons sized 16x16 pixels and 24x24 pixels. You could look at the following demo: Bigger Icons and Buttons.

If you need icons different size than 16x16 or 24x24, you should create your own icon bundle with your preferred size.

Regards,
Bojo
the Telerik team

[Vasssek]

Hello Bojo,

your custom css styles work well, but I couldn't set style for hovered disabled radbutton. I want to disable changing of style when radbutton is disabled and user rolls cursor over it.

I've tried some combinations but without success. I think that it should be something like this, but it doesn't work...

.customHeight40 .rbDisabled:hover,
.customHeight40 .rbDisabled:focus,
.customHeight40 .rbDisabled:active
{
       background-position: right 0 !important;
}

Could you please help me to point out proper style for hovered disabled radbutton ?

Best regards Vasssek

[Bozhidar]

Hello Vasssek,

The necessary styles for the disabled styles are:

/* disabled button */
        a.rbVerticalButton.rbDisabled.customHeight40:hover,
        a.rbVerticalButton.rbDisabled.customHeight40:focus,
        a.rbVerticalButton.rbDisabled.customHeight40:active
        {
            background-position: right 0;
        }

        a.rbVerticalButton.rbDisabled.customHeight40:hover .rbDecorated,
        a.rbVerticalButton.rbDisabled.customHeight40:focus .rbDecorated,
        a.rbVerticalButton.rbDisabled.customHeight40:active .rbDecorated
        {
            background-position: left -40px;
        }

Just put them in the end of the custom CSS.

Best wishes,
Bojo
the Telerik team

[Vasssek]

Hello,

your css addition for disabled radbutton control works perfect !

Thank you...

Vasssek

[mani]

i need text box validation coding exp if i click text box  at the time the message show "please enter the value"

[Bozhidar]

Hello,

I am not quite sure what your scenario should be. RadButton does not support text box. I think RadToolTip could be useful for your scenario.

Kind regards,
Bojo
the Telerik team

[Mike]

I recently started using the RadButton and I really like it.  I created custom sprites with a button height of 28px and they look really nice with color gradients and rounded corners.  And I plan to use the SplitButton feature, so now I'm planning to add the split button parts to the GIF.  I was wondering if there is an example like the one posted above that shows how to set the CSS (especially the background-positions) for custom height split buttons?  Or could you point me in the right direction on figuring out the right settings myself?  I'm new to telerik and sometimes it's a bit challenging for me to getting the CSS right for overriding the embedded skins.

[Bozhidar]

Hello Mike,

The best solution would be to create a separate sprite including the split buttons only. Then you could add the additional CSS that will override the original base positions according to your new design requirements.

Attached is HeightProjectFiles.zip containing old 40px height button files updated with a few extra CSS lines that overrides base styles and allow button to work correctly with 40px height Split Buttons:

/* SplitButton */

        a.customHeight40 .rbSplitRight,
        a.customHeight40 .rbSplitLeft
        {
            background-image: url(splitButton40.gif) !important;
        }

        .customHeight40 .rbSplitRight
        {
            right: 0;
            background-position: 0 0;
        }

        .customHeight40 .rbSplitRight:hover
        {
            background-position: -18px 0;
        }

        .customHeight40 .rbSplitRight:focus,
        .customHeight40 .rbSplitRight:active
        {
            background-position: -36px 0;
        }

        .customHeight40 .rbSplitLeft
        {
            left: 0;
            background-position: -54px 0;
        }

        .customHeight40 .rbSplitLeft:hover
        {
            background-position: -72px 0;
        }

        .customHeight40 .rbSplitLeft:focus,
        .customHeight40 .rbSplitLeft:active
        {
            background-position: -90px 0;
        }

        /* Disabled split buttons */
        .customHeight40.rbDisabled .rbSplitRight:hover,
        .customHeight40 .rbDisabled .rbSplitRight:active,
        .customHeight40 .rbDisabled .rbSplitRight:focus
        {
            background-position: 0 0;
        }

        .customHeight40.rbDisabled .rbSplitLeft:hover,
        .customHeight40.rbDisabled .rbSplitLeft:active,
        .customHeight40.rbDisabled .rbSplitLeft:focus
        {
            background-position: -54px 0;
        }

In the project you will find also splitButton40.gif sprite, containing the new height split buttons.

If you want them to be wider than the original 18ox width, to let`s say 25px, you should add alos the following CSS:

a.customHeight40 .rbSplitRight,
        a.customHeight40 .rbSplitLeft
        {
            width: 25px;
        }

Of course you will need to adjust the background positions also, with the new 7px added to the original width of the split button:

/* SplitButton */

       a.customHeight40 .rbSplitRight,
       a.customHeight40 .rbSplitLeft
       {
           width: 25px;
       }

       a.customHeight40 .rbSplitRight,
       a.customHeight40 .rbSplitLeft
       {
           background-image: url(splitButton40.gif) !important;
       }

       .customHeight40 .rbSplitRight
       {
           right: 0;
           background-position: 0 0;
       }

       .customHeight40 .rbSplitRight:hover
       {
           background-position: -25px 0;
       }

       .customHeight40 .rbSplitRight:focus,
       .customHeight40 .rbSplitRight:active
       {
           background-position: -50px 0;
       }

       .customHeight40 .rbSplitLeft
       {
           left: 0;
           background-position: -75px 0;
       }

       .customHeight40 .rbSplitLeft:hover
       {
           background-position: -100px 0;
       }

       .customHeight40 .rbSplitLeft:focus,
       .customHeight40 .rbSplitLeft:active
       {
           background-position: -125px 0;
       }

       /* Disabled split buttons */
       .customHeight40.rbDisabled .rbSplitRight:hover,
       .customHeight40 .rbDisabled .rbSplitRight:active,
       .customHeight40 .rbDisabled .rbSplitRight:focus
       {
           background-position: 0 0;
       }

       .customHeight40.rbDisabled .rbSplitLeft:hover,
       .customHeight40.rbDisabled .rbSplitLeft:active,
       .customHeight40.rbDisabled .rbSplitLeft:focus
       {
           background-position: -75px 0;
       }

Please note, that the Split Buttons in the project were created with height of 40px and width of 18px and they will work properly with the CSS included in the project only. The above given 25px width CSS is just an example how to improve the existing CSS if you need wider split buttons.

Regards,
Bojo
the Telerik team

[Mike]

Thanks very much, Bojo.  This RadButton control is giving me exactly what I need for this project.  Really like it.

[Yoh]

If I just need to change the background color when the radbutton is disabled, what should I do?

[Yoh]

I was using a custom Skin for a radButton control by changing the sprite image and css. But the problem I am facing right now is to change the backcround color when the radButton is disabled.  Say when enabled it's background is Blue but when disabled i want to change it to Red, How can I do that?

[Bozhidar]

Hi,

The disabled state of RadButton is built with CSS only and sets an opacity to the disabled control. To have a different colored sprite, yous hould create a custom sprite with the diesired disabled colors and to apply it with CSS using rbDisabled CSS class:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        a.RadButton.rbDisabled,
        .RadButton.rbDisabled .rbDecorated
        {
            background-image: url(disabled.gif);
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
        <telerik:RadButton ID="rb1" runat="server" Text="Some text" Skin="Web20" Enabled="false"></telerik:RadButton>
    </form>
</body>
</html>

Attached is the disabled custom sprite.

Regards,
Bozhidar
the Telerik team