Buttons

5 minute read

Button Arrow Background

Controls the background color and image for the small arrow buttons, for example the pagination buttons for comments.

  • Variable Name: button_arrow_background
  • Data Type: background

Default Values

  • units: button_primary_background.units
  • color: global_palette_text_03.color
    • image: button_primary_background.image
  • repeat: button_primary_background.repeat
  • x: button_primary_background.x
  • y: button_primary_background.y
  • gradient_type: button_primary_background.gradient_type
  • gradient_direction: button_primary_background.gradient_direction
  • gradient_start_color: button_primary_background.gradient_start_color
    • gradient_mid_color: button_primary_background.gradient_mid_color
    • gradient_end_color: button_primary_background.gradient_end_color

Button Arrow Border

Controls the border width, style, and color for the small arrow buttons, for example the comment pagination buttons.

  • Variable Name: button_arrow_border
  • Data Type: border

Default Values

  • units: px
  • width: 1
  • style: solid
  • color: global_palette_fill_02.color
    • inherit_param_color: #F8F8F8|-48, -44, -42

Button Disabled Background

Controls the background color and image for disabled buttons.

  • Variable Name: button_disabled_background
  • Data Type: background

Default Values

  • units: button_primary_background.units
  • color: global_palette_fill_02.color
    • inherit_param_color: #F8F8F8|3, 3, 3
  • image: button_primary_background.image
  • repeat: button_primary_background.repeat
  • x: button_primary_background.x
  • y: button_primary_background.y
  • gradient_type: button_primary_background.gradient_type
  • gradient_direction: button_primary_background.gradient_direction
  • gradient_start_color: button_primary_background.gradient_start_color
    • gradient_mid_color: button_primary_background.gradient_mid_color
    • gradient_end_color: button_primary_background.gradient_end_color

Button Disabled Border

Controls the border width, style, and color for disabled buttons.

  • Variable Name: button_disabled_border
  • Data Type: border

Default Values

  • units: px
  • width: 1
  • style: solid
  • color: global_palette_fill_02.color
    • inherit_param_color: #F8F8F8|-48, -44, -42

Button Disabled Text Color

Controls the text color for disabled buttons.

  • Variable Name: button_disabled_text_color
  • Data Type: color

Default Values

  • color: global_palette_text_02.color
    • inherit_param_color: #656A6D|-72, -67, -64

Button Font

Controls the font family, size, and style for buttons.

  • Variable Name: button_font
  • Data Type: font

Default Values

  • units: rem
  • family: global_text_font.family
  • size: 1.2
  • lineheight: global_text_font.lineheight
  • weight: bold
  • style: global_text_font.style
  • variant: global_text_font.variant

Button Pressed Background

This controls the background color and other properties buttons in the pressed state.

  • Variable Name: button_pressed_background
  • Data Type: background

Default Values

  • gradient_type: linear-gradient
  • gradient_direction: to bottom
  • gradient_start_color: rgba(0, 0, 0, 0.3) 0%
    • gradient_mid_color: rgba(150, 150, 150, 0.1) 50%
    • gradient_end_color: rgba(255, 255, 255, 0.7)

Button Primary Background

Controls the background color and image for primary buttons.

  • Variable Name: button_primary_background
  • Data Type: background

Default Values

  • color: global_palette_accent_02.color
    • gradient_type: linear-gradient
  • gradient_direction: to top
  • gradient_start_color: rgba(0, 0, 0, 0.1) 0%
    • gradient_mid_color: rgba(255, 255, 255, 0.0) 50%
    • gradient_end_color: rgba(255, 255, 255, 0.7) 100%

Button Primary Background Hover

Controls the background color and image for primary buttons when the mouse is over them.

  • Variable Name: button_primary_background_hover
  • Data Type: background

Default Values

  • units: button_primary_background.units
  • color: button_primary_background.color
    • image: button_primary_background.image
  • repeat: button_primary_background.repeat
  • x: button_primary_background.x
  • y: button_primary_background.y
  • gradient_type: button_primary_background.gradient_type
  • gradient_direction: button_primary_background.gradient_direction
  • gradient_start_color: button_primary_background.gradient_start_color
    • gradient_mid_color: button_primary_background.gradient_mid_color
    • gradient_end_color: button_primary_background.gradient_end_color

Button Primary Border

Controls the border width, style, and color for primary buttons.

  • Variable Name: button_primary_border
  • Data Type: border

Default Values

  • units: px
  • width: 1
  • style: solid
  • color: global_palette_accent_02.color
    • inherit_param_color: #0F93FF|-26, -10, -51

Button Primary Border Hover

Controls the border width, style, and color for primary buttons when the mouse is over them.

  • Variable Name: button_primary_border_hover
  • Data Type: border

Default Values

  • units: px
  • width: 1
  • style: solid
  • color: global_palette_accent_01.color
    • inherit_param_color: #052733|5, -8, -29

Button Primary Light Background

Controls the background color and image for primary light buttons.

  • Variable Name: button_primary_light_background
  • Data Type: background

Default Values

  • units: button_primary_background.units
  • color: global_palette_accent_03.color
    • image: button_primary_background.image
  • repeat: button_primary_background.repeat
  • x: button_primary_background.x
  • y: button_primary_background.y
  • gradient_type: button_primary_background.gradient_type
  • gradient_direction: button_primary_background.gradient_direction
  • gradient_start_color: button_primary_background.gradient_start_color
    • gradient_mid_color: button_primary_background.gradient_mid_color
    • gradient_end_color: button_primary_background.gradient_end_color

Button Primary Light Background Hover

Controls the background color and image for primary light buttons when the mouse is over them.

  • Variable Name: button_primary_light_background_hover
  • Data Type: background

Default Values

  • units: button_primary_light_background.units
  • color: button_primary_light_background.color
    • image: button_primary_light_background.image
  • repeat: button_primary_light_background.repeat
  • x: button_primary_light_background.x
  • y: button_primary_light_background.y
  • gradient_type: button_primary_light_background.gradient_type
  • gradient_direction: button_primary_light_background.gradient_direction
  • gradient_start_color: button_primary_light_background.gradient_start_color
    • gradient_mid_color: button_primary_light_background.gradient_mid_color
    • gradient_end_color: button_primary_light_background.gradient_end_color

Button Primary Light Border

Controls the border width, style, and color for primary light buttons.

  • Variable Name: button_primary_light_border
  • Data Type: border

Default Values

  • units: px
  • width: 1
  • style: solid
  • color: global_palette_fill_02.color
    • inherit_param_color: #F8F8F8|-74, -69, -66

Button Primary Light Border Hover

Controls the border width, style, and color for primary light buttons when the mouse is over them.

  • Variable Name: button_primary_light_border_hover
  • Data Type: border

Default Values

  • units: px
  • width: 1
  • style: solid
  • color: global_palette_fill_02.color
    • inherit_param_color: #F8F8F8|-115, -108, -104

Button Primary Light Text Color

Controls the text color for primary light buttons.

  • Variable Name: button_primary_light_text_color
  • Data Type: color

Default Values

  • color: global_palette_text_01.color

Button Primary Light Text Color Hover

Controls the text color for primary light buttons when the mouse is over them.

  • Variable Name: button_primary_light_text_color_hover
  • Data Type: color

Default Values

  • color: button_primary_light_text_color.color

Button Primary Text Color

Controls the text color for primary buttons.

  • Variable Name: button_primary_text_color
  • Data Type: color

Default Values

  • color: global_palette_text_03.color

Button Primary Text Color Hover

Controls the text color for primary buttons when the mouse is over them.

  • Variable Name: button_primary_text_color_hover
  • Data Type: color

Default Values

  • color: button_primary_text_color.color

Button Secondary Background

Controls the background color and image for secondary buttons.

  • Variable Name: button_secondary_background
  • Data Type: background

Default Values

  • units: button_primary_background.units
  • color: global_palette_fill_01.color
    • image: button_primary_background.image
  • repeat: button_primary_background.repeat
  • x: button_primary_background.x
  • y: button_primary_background.y
  • gradient_type: button_primary_background.gradient_type
  • gradient_direction: button_primary_background.gradient_direction
  • gradient_start_color: button_primary_background.gradient_start_color
    • gradient_mid_color: button_primary_background.gradient_mid_color
    • gradient_end_color: button_primary_background.gradient_end_color

Button Secondary Background Hover

Controls the background color and image for secondary buttons when the mouse is over them.

  • Variable Name: button_secondary_background_hover
  • Data Type: background

Default Values

  • color: button_secondary_background.color

Button Secondary Border

Controls the border width, style, and color for secondary buttons.

  • Variable Name: button_secondary_border
  • Data Type: border

Default Values

  • units: px
  • width: 1
  • style: solid
  • color: global_palette_fill_02.color
    • inherit_param_color: #F8F8F8|-57, -51, -47

Button Secondary Border Hover

Controls the border width, style, and color for secondary buttons when the mouse is over them.

  • Variable Name: button_secondary_border_hover
  • Data Type: border

Default Values

  • units: px
  • width: 1
  • style: solid
  • color: global_palette_fill_02.color
    • inherit_param_color: #F8F8F8|-115, -108, -104

Button Secondary Text Color

Controls the text color for secondary buttons.

  • Variable Name: button_secondary_text_color
  • Data Type: color

Default Values

  • color: global_palette_text_01.color

Button Secondary Text Color Hover

Controls the text color for secondary buttons when the mouse is over them.

  • Variable Name: button_secondary_text_color_hover
  • Data Type: color

Default Values

  • color: button_secondary_text_color.color

Button Special Background

Controls the background color and image for special buttons.

  • Variable Name: button_special_background
  • Data Type: background

Default Values

  • units: button_primary_background.units
  • color: global_palette_contrast_01.color
    • image: button_primary_background.image
  • repeat: button_primary_background.repeat
  • x: button_primary_background.x
  • y: button_primary_background.y
  • gradient_type: button_primary_background.gradient_type
  • gradient_direction: button_primary_background.gradient_direction
  • gradient_start_color: button_primary_background.gradient_start_color
    • gradient_mid_color: button_primary_background.gradient_mid_color
    • gradient_end_color: button_primary_background.gradient_end_color

Button Special Border

Controls the border width, style, and color for special buttons.

  • Variable Name: button_special_border
  • Data Type: border

Default Values

  • units: px
  • width: 1
  • style: solid
  • color: global_palette_fill_02.color
    • inherit_param_color: #F8F8F8|-57, -51, -47

Button Special Border Hover

Controls the border width, style, and color for special buttons when the mouse is over them.

  • Variable Name: button_special_border_hover
  • Data Type: border

Default Values

  • units: px
  • width: 1
  • style: solid
  • color: global_palette_fill_02.color
    • inherit_param_color: #F8F8F8|-115, -108, -104

Button Special Text Color

Controls the text color for special buttons.

  • Variable Name: button_special_text_color
  • Data Type: color

Default Values

  • color: global_palette_text_01.color
updated: 2021-09-13 09:08pm | Version: 5.6.5 Alpha 10