Button, Toggle Button and Repeat Button CSS Styling

Smart HTML Elements use a pair of css files - smart.default.css and smart.[theme name].css. The default stylesheet creates the styles related to the element's layout like margin, padding, border-width, position. The second CSS file applies the HTML Element's colors, fonts, borders and backgrounds. The smart.default.css should be included before the second CSS file.Below is the list of CSS classes and properties used by the Smart.Button.

All Common CSS variables:

  • --smart-primary: The theme primary color.
  • --smart-primary-color: Text color on top of a primary background.
  • --smart-secondary: The theme secondary color.
  • --smart-secondary-color: Text color on top of a secondary background.
  • --smart-error: The theme error color.
  • --smart-error-color: Text color on top of a error background.
  • --smart-success: The theme success color.
  • --smart-success-color: Text color on top of a success background.
  • --smart-background: The theme background color. The background color appears behind scrollable content.
  • --smart-background-color: Text color on top of a background background.
  • --smart-surface: The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus.
  • --smart-surface-color: Text color on top of a surface surface.
  • --smart-disabled: The theme primary color in disabled state.
  • --smart-disabled-color: Text color on top of a theme background in disabled state.
  • --smart-font-size: Theme font-size.
  • --smart-font-family: Theme font-family.
  • --smart-border-width: Theme border-width.
  • --smart-border-radius: Theme border-radius.
  • --smart-border: The theme border settings.
  • --smart-outline: The theme border color.
  • --smart-arrow-size: Font size of the arrow elements.
  • --smart-editor-selection: Background color of the selected text.
  • --smart-editor-selection-color: Color of the selected text.
  • --smart-alternation-index0-color: Alternation color for index0.
  • --smart-alternation-index0-border-color: Alternation border color for index0.
  • --smart-alternation-index0-background: Alternation background color for index0.
  • --smart-alternation-index1-color: Alternation color for index1.
  • --smart-alternation-index1-border-color: Alternation border color for index1.
  • --smart-alternation-index1-background: Alternation background color for index1.
  • --smart-alternation-index2-color: Alternation color for index2.
  • --smart-alternation-index2-border-color: Alternation border color for index2.
  • --smart-alternation-index2-background: Alternation background color for index2.
  • --smart-tick-color: Default tick color for smartTank, smartSlider and smartGauge.
  • --smart-tick-label-color: Default tick label color for smartTank, smartSlider and smartGauge.
  • --smart-box-height: Default height for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-box-width: Default width for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-bar-height: Default height for headers and footers.
  • --smart-bar-width: Default width for headers and footers.
  • --smart-editor-height: Default height for editors.
  • --smart-editor-width: Default width for editors.
  • --smart-editor-drop-down-width: Default width for editors drop-down.
  • --smart-editor-drop-down-height: Default height for editors drop-down.
  • --smart-editor-label-padding: Default padding for inputs.
  • --smart-editor-addon-width: Default width for spin buttons, dropdown buttons.

Specific CSS variables for Button styling:

  • --smart-button-text-transform: Controls the capitalization of button's text. Could be set as uppercase/lowercase/capitalize.
  • --smart-button-border-top-right-radius: Sets button's top-right border radius.
  • --smart-button-border-top-left-radius: Sets button's top-left border radius.
  • --smart-button-border-bottom-left-radius: Sets button's bottom-left border radius.
  • --smart-button-border-bottom-right-radius: Sets button's bottom-right border radius.
  • --smart-button-border-width: Sets button's border width.
  • --smart-button-padding: Sets button's paddings.
  • --smart-button-font-family: Sets button's font family.
  • --smart-button-font-size: Sets button's font-size.
  • --smart-button-large-padding: Sets large button's paddings.
  • --smart-button-large-font-size: Sets large button's font size.
  • --smart-button-small-padding: Sets small button's paddings.
  • --smart-button-small-font-size: Sets small button's font size.
  • --smart-button-very-small-padding: Sets very small button's paddings.
  • --smart-button-very-small-font-size: Sets very small button's font size.
  • --smart-button-background: Defines button's background color
  • --smart-button-border: Defines button's border color.
  • --smart-button-color: Defines button's color.
  • --smart-button-background-hover: Defines button's background color on hover state.
  • --smart-button-border-hover: Defines button's border color on hover state.
  • --smart-button-color-hover: Defines button's color on hover state.
  • --smart-button-background-active: Defines button's background color on active state.
  • --smart-button-border-active: Defines button's border color on active state.
  • --smart-button-color-active: Defines button's color on active state.
  • --smart-button-background-focus: Defines button's background color when it's focussed.
  • --smart-button-border-focus: Defines button's border color when it's focussed.
  • --smart-button-color-focus: Defines button's color when it's focussed.
  • --smart-button-opacity: Defines button's opacity.
  • --smart-button-opacity-hover: Defines button's opacity on hover state.
  • --smart-button-opacity-active: Defines button's opacity on active state.
  • --smart-button-opacity-focus: Defines button's opacity when it's focussed.

Button - Flat

  • --smart-button-flat-color: The color of the flat button.

Button - Outlined

  • --smart-button-outlined-color: The color of the outlined button.
  • --smart-button-outlined-border: The border of the outlined button.