Button card changing colour based on counter helper entity

[ancient crater]

Hello i would like some help with as the title suggests, changing the colour of the button based on the value of the counter. this is the button so far

show_name: true
show_icon: true
type: button
entity: counter.days_since_changing_bedsheets
icon_height: 40px
icon: mdi:bed-empty
theme: Material You
show_state: true
tap_action:
  action: perform-action
  perform_action: counter.set_value
  target:
    entity_id: counter.days_since_changing_bedsheets
  data:
    value: 0
grid_options:
  columns: 3
  rows: 2

i am new to YAML so set up the button with the visual editor

i found this but didnt quite understand what Russel said and was wondering if this is outdated or not. https://community.home-assistant.io/t/set-custom-button-card-color/311030

i also installed Button Card by RomRider but did not understand it well

the behavior i would like is if the counter value is 0, the button is white, 1 is green, 2 is yellow and 3 is red, being

[languid spruce]

The custom:button-card IMO is the easiest to set up for what you want. The link you mentioned is accurate for the custom:button-card. For the stock button card, you would need to use card_mod.
I'll put together some examples for you tonight when I get home from work.

[ancient crater]

Okay thank you

[languid spruce]

Here's two examples for you. In the screenshot, the left is the stock button card using card_mod; the right is a custom:button-card. I tried to simplify both examples by turning the desired color into a variable rather than using an IF statement to be evaluated for each option. A number greater than 3 will still return the color red, but will also have the icon blink. (I'm not the greatest at animations but I just threw it in there for proof-of-concept. The stock card uses keyframes; the custom:button-card uses its built-in blink animation. Keyframes can also be used in the custom:button-card if you want. Also, it can be stylized to look just like the stock button card with a little bit of work.)

type: button
entity: counter.tester
show_name: true
show_icon: true
show_state: true
name: Days since changing bedsheets
icon_height: 40px
icon: mdi:bed-empty
tap_action:
  action: perform-action
  perform_action: counter.set_value
  target:
    entity_id: counter.tester
  data:
    value: 0
card_mod:
  style: |
    @keyframes blink {
      50% { --state-icon-color: transparent; }
    }
    ha-card {
      {% set state = states(config.entity) | int %}
      {% if (state > 3) %}
        {% set state = 3 %}
        animation: blink 3s linear infinite;
      {% endif %}
      {% set colors = ['white', 'green', 'yellow', 'red'] %}
      --state-icon-color: {{ colors[state] }};
      color: {{ colors[state] }};
      --secondary-text-color: {{ colors[state] }};
      border-color: {{ colors[state] }};
    }

type: custom:button-card
entity: counter.tester
show_state: true
icon: mdi:bed-empty
name: Days since changing bedsheets
variables:
  colors:
    - white
    - green
    - yellow
    - red 
styles:
  icon:
    - height: 40px
    - color: "[[[ return variables.colors[entity.state] ?? variables.colors[3] ]]]"
    - animation: "[[[ if (entity.state > 3) return 'blink 2.5s linear infinite' ]]]"
  card:
    - border-color: "[[[ return variables.colors[entity.state] ?? variables.colors[3] ]]]"
  name:
    - color: "[[[ return variables.colors[entity.state] ?? variables.colors[3] ]]]"
    - white-space: normal
    - word-wrap: break-word
  state:
    - color: "[[[ return variables.colors[entity.state] ?? variables.colors[3] ]]]"
tap_action:
  action: perform-action
  perform_action: counter.set_value
  target:
    entity_id: counter.tester
  data:
    value: 0

The custom:button-card also has a state: option that let's you define styling for each state. For example, maybe for "0", it would have a white smilie-face icon, with pink text, and an orange border. "1" would be brown thumbs-up icon, yellow text, and a purple border. And so on. (These examples are exaggerated for demonstration.)

[ancient crater]

oh wow thank you this is really nice!

[signal matrix]

I also do a lot with custom:button-card. This is what I would do for that.

type: custom:button-card
entity: counter.days_since_changing_bedsheets
show_name: true
show_state: true
show_icon: true
show_label: true
name: Days since changing the sheets
color_type: icon
aspect_ratio: 
layout: name_state
tap_action:
  action: perform-action
  perform_action: counter.set_value
  target:
    entity_id: counter.tester
  data:
    value: 0
state:
  - value: 0
    color: white
    icon: mdi:bed-empty
  - value: 1
    color: green
    icon: mdi:bed-empty
  - value: 2
    color: yellow
    icon: mdi:bed-clock
  - value: 3
    color: red
    icon: mdi:bed-clock
    styles:
      card:
        - animation: blink 2s ease-in-out infinite```