Change sub button background colour while on...not on and off

[prestr]

Goal

I want to change the sub button background colours when the entities are on.

Source Yaml

type: custom:bubble-card
card_type: sub-buttons
button_type: switch
sub_button:
  main: []
  bottom:
    - entity: light.basement_lights
      show_name: true
    - entity: switch.garage_lights
      show_name: true
hide_main_background: true
rows: 0.938
card_layout: large
styles: |
  * { 
    font-size: 14px !important;
  }
    .bubble-sub-button-1 {
    background: rgba(250,150,50,0.5) !important;
  }

    .bubble-sub-button-2 {
    background: rgba(500,1,50,0.5) !important;
  }

Which step did you already try?

No response

Problem

When I add the styling the background changes colour regardless if the entity is on or off. I want it to be the default grey when they are off.

Read the documentation

• I have read the documentation

[johndoe0815]

Either you use one of the modules that allow this via GUI, or your code requires some if...then...else.

Here is an example how you could change the background of a sub button depending on the state of an entity:

.bubble-sub-button-1 {
  background-color: ${hass.states['media_player.sonos_wohnzimmer'].state == 'playing' ? 'rgba(255,140,0,1)' : 'white'} !important;
}

[prestr]

That works, thank you!