Change backgroundcolor of a sub button

[nrfribeiro]

Goal

Change backgroundcolor of a sub button based on a value of a sensor that is the entity of the sub button

Source Yaml

type: custom:bubble-card
card_type: button
entity: switch.luz_hall_transeiras_switch_0
name: Luz
show_attribute: false
show_state: true
show_last_changed: true
force_icon: false
sub_button:
  - entity: sensor.sensor_movimento_hall_transeiras_battery
    show_name: false
    show_state: true
    state_background: true
    show_attribute: true
    name: Battery
styles: |-
  .bubble-sub-button-1 {
    {% set battery = hass.states['sensor.sensor_movimento_hall_transeiras_battery'] | int %}
    {% if battery > 80 %}
    background-color: green;
    {% elif battery < 30 %}
    background-color: red;
    {% else %}
    background-color: yellow;
    {% endif %}
  }

Which step did you already try?

No response

Problem

Can you help me to understand what is wrong?

Read the documentation

• I have read the documentation

[MrBearPresident]

I will gladly help you.

Bubble-Cards don't support jinja2 (yet).
See documentation about templates
In the examples there is one about the sub-button icon color.

type: custom:bubble-card
card_type: button
entity: switch.luz_hall_transeiras_switch_0
name: Luz
show_attribute: false
show_state: true
show_last_changed: true
force_icon: false
sub_button:
  - entity: sensor.sensor_movimento_hall_transeiras_battery
    show_name: false
    show_state: true
    state_background: true
    show_attribute: true
    name: Battery
styles: |-
  .bubble-sub-button-1 {
      color: ${ hass.states['sensor.sensor_movimento_hall_transeiras_battery'].state > 80 ? 'green':
                hass.states['sensor.sensor_movimento_hall_transeiras_battery'].state > 30 ? 'yellow' :
                'red'} !important;
  }

---

^{If this solves your problem, mark this as the solution and close the discussion.}

[nrfribeiro]

thanks. it worked once I change from color to background-color.

appreciated.