Button Style help please

[Michael]

Hi, i am trying to style our radButtons in the same way our asp buttons are styled.  Here is our current css class for our asp buttons:

.button {
    height: 21px;
    background-image: url('/Common/Images/button.png');
    background-repeat: repeat-x;

    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;


    border-left: 1px solid #666;
    border-right: 1px solid #666;
    border-top: 0px;
    border-bottom: 0px;
    color: white;
    padding-left: 12px;
    padding-right: 12px;
    cursor: pointer;

}

I have tried a few different ways but i get some weird things happening.  For instance, it also styles our rad toggle buttons which is very weird.  Im sure it's going to be quite simple for you guys but im just struggling to get it right.

Some css i tried:

.RadButton {
    height: 21px !important;
    background-image: url('/Common/Images/button.png') !important;
    background-repeat: repeat-x !important;

    border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -webkit-border-radius: 4px !important;



    border-left: 1px solid #666 !important;
    border-right: 1px solid #666 !important;
    border-top: 1px solid #666 !important;
    border-bottom: 1px solid #666 !important;
    color: white !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    cursor: pointer !important;
}
.rbDecorated {
    height: 21px !important;
    background-image: url('/Common/Images/button.png') !important;
    background-repeat: repeat-x !important;



    border: 0px !important;
    color: white !important;
    cursor: pointer !important;
}
.rbSkinnedButton {
  height: 21px !important;
    background-image: url('/Common/Images/button.png') !important;
    background-repeat: repeat-x !important;



    border: 0px !important;
    color: white !important;
    cursor: pointer !important;
}
.rbSkinnedButton:hover
{
    background-position: initial !important;
    height: 21px !important;
    background-image: url('/Common/Images/button.png') !important;
    background-repeat: repeat-x !important;



    border: 0px !important;
    color: white !important;
    cursor: pointer !important;
}

Any help you can provide is greatly appreciated.

Thanks,
Michael

[Michael]

Managed to solve it with the below css:

.button.RadButton {
    height: 21px !important;
    background-image: url('/Common/Images/button.png') !important;
    background-repeat: repeat-x !important;

    border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -webkit-border-radius: 4px !important;



    border-left: 1px solid #666 !important;
    border-right: 1px solid #666 !important;
    border-top: 1px solid #666 !important;
    border-bottom: 1px solid #666 !important;
    color: white !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    cursor: pointer !important;
}
.button.rbdecorated,
.button.rbSkinnedButton,
.button.radbutton_outlook.rbskinnedbutton,
.button.radbutton_outlook .rbdecorated,
.button.radbutton_outlook.rbverticalbutton,
.button.radbutton_outlook.rbverticalbutton .rbdecorated,
.button.radbutton_outlook .rbsplitright,
.button.radbutton_outlook .rbsplitleft,
.button.rbSkinnedButton:hover
 {
    height: 21px !important;
    background-image: url('/Common/Images/button.png') !important;
    background-repeat: repeat-x !important;
    border: 0px !important;
    color: white !important;
    cursor: pointer !important;
    background-position: initial;
}

[Bozhidar]

Hello,

It is good you managed to solve the issue on your own, but I would suggest you to check RadButtom Custom Skin and to keep as close as it is possible to the good practices recommended.

Kind regards,
Bozhidar
the Telerik team