CSS Classes

Common Styles

CSS Class	Description
.RadButton	RadButton main wrapping element
.RadButton img	Styles img inserted into RadButton not to have visible borders
.rbSkinnedButton	Styles span element that wraps the button
.rbDecorated	Styles RadButton input element
.rbSkinnedButton:hover	Styles span element that wraps the button hover state
.rbSkinnedButton:hover .rbDecorated	Styles RadButton input element hover state
.rbSkinnedButton:focus	Styles span element that wraps the button focus state
.rbSkinnedButton:active	Styles span element that wraps the button active state
.rbSkinnedButton:focus .rbDecorated	Styles RadButton input element focus state
.rbSkinnedButton:active .rbDecorated	Styles RadButton input element active state
.RadButton input.rbDecorated:focus, .RadButton input.rbDecorated::-moz-focus-inner	Remove default focus style
.rbPrimary	Styles extra space to the left side of the input when Primary Icon is added
.rbPrimaryIconOnly	Styles button when only primary icon is added, without any text
.rbSecondary	Styles extra space to the right side of the input when Secondary Icon is added
.rbPrimarySecondaryIcon	Styles button when only primary and secondary icons are added, without any text
.rbPrimaryIcon	Styles the primary icon
.rbSecondaryIcon	Styles the secondary icon
.rbText	Styles the text in RadButton
.rbImageButton	Styles RadButton image button
.rbImageButton:hover	Styles RadButton image button hover state
.rbLinkButton	Styles RadButton link button
.rbVerticalSkinnedButton	Styles span element that wraps the vertical button
.rbVerticalDecorated	Styles Vertical RadButton input element
.rbVerticalSkinnedButton:hover	Styles span element that wraps the Vertical button hover state
.rbVerticalSkinnedButton:hover .rbVerticalDecorated	Styles Vertical RadButton input element hover state
.rbVerticalSkinnedButton:focus	Styles span element that wraps the Vertical button focus state
.rbVerticalSkinnedButton:active	Styles span element that wraps the Vertical button active state
.rbVerticalSkinnedButton:focus .rbVerticalDecorated	Styles Vertical RadButton input element focus state
.rbVerticalSkinnedButton:active .rbVerticalDecorated	Styles Vertical RadButton input element active state
.rbVerticalPrimary	Styles the vertical button primary icon
.rbVerticalSecondary	Styles the vertical button secondary icon
.rbVerticalText	Styles the text in Vertical RadButton
.rbToggleButton	Style toggle button
.rbToggleButtonIcon	Style toggle button icon
.rbToggleCheckbox	Style toggle button checkbox
.rbToggleCheckbox:hover,.rbToggleButton:hover .rbToggleCheckbox	Style toggle button checkbox hover state
.rbToggleCheckboxChecked	Style toggle button checkbox checked
.rbToggleCheckboxChecked:hover, .rbToggleButton:hover .rbToggleCheckboxChecked	Style toggle button checkbox checked hover state
.rbToggleRadio	Style toggle button radio button
.rbToggleRadio:hover, .rbToggleButton:hover .rbToggleRadio	Style toggle button radio button hover state
.rbToggleRadioChecked	Style toggle button radio button checked
.rbToggleRadioChecked:hover, .rbToggleButton:hover .rbToggleRadioChecked	Style toggle button radio button checked hover state
.rbDisabled	Styles disabled buttons
.rbSplitRight	Styles right split button
.rbSplitLeft	Styles left split button
.rbSplitRight:hover	Styles right split button hovered state
.rbSplitLeft:hover	Styles left split button hovered state
.rbSplitRight	Styles Right split button
.rbSplitLeft	Styles Left split button
.rbSkinnedButtonChecked	Styles checked button
.rbSkinnedButtonChecked:hover	Styles checked button hovered state
.rbToggleCheckboxFilled	Styles toggle button checkbox filled state
.rbToggleCheckbox:hover, .rbToggleButton:hover .rbToggleCheckboxFilled	Styles toggle button checkbox hovered filled state
span.rbDisabled:hover,span.rbDisabled:focus,span.rbDisabled:active	Styles the position for the disabled button in all states
span.rbDisabled:hover .rbDecorated,span.rbDisabled:focus .rbDecorated,span.rbDisabled:active .rbDecorated	Styles the position for the disabled button span in all states
.rbDisabled .rbToggleCheckbox:hover,.rbDisabled:hover .rbToggleCheckbox	Styles disabled toggle button checkbox normal state
.rbDisabled .rbToggleCheckboxChecked:hover,.rbDisabled:hover .rbToggleCheckboxChecked	Styles disabled toggle button checkbox hover state
.rbDisabled .rbToggleRadio:hover,.rbDisabled:hover .rbToggleRadio	Styles disabled toggle button radiobutton normal state
.rbDisabled .rbToggleRadioChecked:hover,.rbDisabled:hover .rbToggleRadioChecked	Styles disabled toggle button radiobutton hover state
.rbHideElement	Styles class that hide elements
.rbTextButton	Styles text button
.rbNativeButton	Sets the button default browser style
.RadButton .rbHiddenImages	Styles class to hide images
.rbAdd, .rbRemove, .rbOk, .rbCancel, .rbUpload, .rbDownload, .rbPrevious, .rbNext, .rbOpen, .rbAttach, .rbSave, .rbConfig, .rbPrint, .rbRefresh, .rbSearch, .rbHelp, .rbCart, .rbEdit, .rbRSS, .rbMail	Classes for predefined Primary and/or Secondary Icons

Skin - Specific styles

CSS Class	Description
.RadButton_SkinName.rbSkinnedButton, .RadButton_SkinName.rbDecorated, .RadButton_SkinName.rbVerticalSkinnedButton, .RadButton_SkinName .rbVerticalDecorated, .RadButton_SkinName.rbSplitRight, .RadButton_SkinName.rbSplitLeft	These are the selectors for the background image sprite (ButtonSprites.gif). This image sprite sets the background for buttons, arrows, split border, vertical button
.RadButton_SkinName.rbToggleCheckbox, .RadButton_SkinName.rbToggleCheckboxChecked, .RadButton_SkinName .rbToggleRadio, .RadButton_SkinName .rbToggleRadioChecked, .RadButton_SkinName .rbToggleCheckboxFilled	These are the selectors for the background image sprite (ToggleSprite.gif). This image sprite sets background color for radio buttons and checkboxes.
.RadButton_SkinName.rbLinkButton	Styles link button – color, border, background color
.RadButton_SkinName.rbLinkButton:hover	Styles link button hover state
.RadButton_SkinName.rbToggleButton	Styles toggle button color
.RadButton_SkinName.rbToggleButton:hover	Styles toggle button hover color
.RadButton_SkinName.rbToggleButton.rbDisabled	Styles toggle button disabled state
.RadButton_SkinName.rbCustomToggle	Styles Custom Toggle button
.RadButton_SkinName.rbLinkButton.rbDisabled, .RadButton_SkinName.rbCustomToggle.rbDisabled, .RadButton_SkinName.rbLinkButton.rbDisabled:hover, .RadButton_SkinName.rbCustomToggle.rbDisabled:hover	Styles Link button and Custom toggle buttons disabled normal and hover states
.RadButton_SkinName.rbSkinnedButtonChecked .rbDecorated	Styles checked button
.RadButton_SkinName.rbSkinnedButtonChecked:hover .rbDecorated	Styles checked button hovered state
.RadButton_SkinName.rbLinkButtonChecked	Styles checked link button
.RadButton_SkinName.rbLinkButtonChecked:hover	Styles checked link button hovered state

Lightweight Rendering - Specific Styles

CSS Class	Description
RadButton	Main control wrapper element
rbButton	Primitive class for all buttons like elements
rbHovered	Styles hovered Button element
RadButton:focus	Styles focused Button element
rbSelected	Styles selected/active Button element
rbRounded	Applies rounded corners to the Button element
rbIcon	Primitive class for icon elements inserted inside Button
rbPrimary	Primitive used to apply specific styles when Primary Custom Icon is used
rbSecondary	Primitive used to apply specific styles when Secondary Custom Icon is used
rbPrimaryIcon	Primitive class for Primary icon element inserted inside Button
rbSecondaryIcon	Primitive class for Secondary icon element inserted inside Button
rbIcon:before	Primitive class for font icon wrapper
.rbAdd:before, .rbRemove:before, .rbOk:before, .rbCancel:before, .rbUpload:before, .rbDownload:before, .rbPrevious:before, .rbNext:before, .rbOpen:before, .rbAttach:before, .rbSave:before, .rbConfig:before, .rbPrint:before, .rbRefresh:before, .rbSearch:before, .rbHelp:before, .rbCart:before, .rbEdit:before, .rbRSS:before, .rbMail:before, .rbFB:before, .rbTwitter:before, .rbLinkedIn:before, .rbPinterest, .rbYouTube:before, .rbVimeo:before, .rbBehance:before, .rbDribble:before, .rbGooglePlus:before	Applies specific font character to the Button predefined icons
rbCustomIcon	Applies styles for custom icon element wrapper
rbText	Applies styles for Button text element
rbCheckBox	Applies styles for the checkbox wrapper element
rbRadioButton	Applies styles for the radio button wrapper element
rbToggleCheckbox	Applies styles for checkbox icon wrapper element
rbToggleCheckboxChecked	Applies styles for checkbox selected icon wrapper element
rbToggleCheckboxFilled	Applies styles for checkbox tri-state icon wrapper element
rbToggleRadio	Applies styles for radio button icon wrapper element
rbToggleRadioChecked	Applies styles for radio button selected icon wrapper element
rbToggleCheckbox:before	Applies specific font character to the checkbox
rbToggleCheckboxChecked:before	Applies specific font character to the selected checkbox
rbToggleCheckboxFilled:before	Applies specific font character to the tri-state checkbox
rbToggleRadio:before	Applies specific font character to the radio button
rbToggleRadioChecked:before	Applies specific font character to the selected radio button
rbSplitPart	Primitive class for SplitButton wrapper arrow element
rbSplitPartRight	Applies styles for SplitButton right positioned arrow
rbSplitPartLeft	Applies styles for SplitButton left positioned arrow
rbSplitIcon	Primitive class for SplitButton arrow element
rbSplitIcon:before	Applies specific font character to SplitButton arrow element
rbImageButton	Applies specific styles when custom image button is used
rbDisabled	Applies specific styles when Button is disabled
rbRtl	Applies styles to render Button properly in Right to Left mode
span.RadButton.rbButton	Applies specific styles for SplitButton wrapper, which is SPAN and not BUTTON element.

See Also

• Skins

• Creating a Custom Skin

• Custom Height Tutorial

• Primary and Secondary Action Buttons