Custom button card color change

Configuration
1

can some one help me with this
i want the border to change aswell as the mdi icon
i can get them to work seperate of each other but not together
i also already tryde puting them in a if statement like the label: part

type: custom:button-card
show_entity_picture: true
state:
  - value: 'on'
    icon: mdi:lightbulb-on-outline
    color: '#00FFCC'
styles:
  name:
    - color: '#00FFCC'
  card:
    - '-webkit-box-shadow': 0px 0px 9px 3px'#00FFCC'
    - box-shadow: 0px 0px 9px 3px'#00FFCC'
    - value: 'off'
  styles:
    name:
      - color: white
    card:
      - '-webkit-box-shadow': 0px 0px 9px 3px var(--button-card-light-color)
      - box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
        icon: mdi:lightbulb-outline
        color: white
tap_action:
  action: toggle
entity: light.huiskamer
show_state: false
show_label: true
size: 50%
label: |
  [[[
    if (states['light.huiskamer'].state === "on")
     return "on";
    else if (states['light.huiskamer'].state === "off")
      return "off";
  ]]]
3

update i got it to stop giving me errors
but i lost an icon the one i specefied dossent show up any more
also the color change works but only for the icon
i still cant get the border to show up

type: custom:button-card
show_entity_picture: true
state:
  - value: 'off'
    icon: mdi:lightbulb-outline
    color: '#00FFCC'
styles:
  name:
    - color: '#00FFCC'
  card:
    - '-webkit-box-shadow': 0px 0px 9px 3px'#00FFCC'
    - box-shadow: 0px 0px 9px 3px'#00FFCC'
stats:
  - value: 'on'
    icon: mdi:lightbulb-on-outline
    color: white
    styles: null
    name:
    - color: white
    card:
      - '-webkit-box-shadow': 0px 0px 9px 3px'#00FFCC'
      - box-shadow: 0px 0px 9px 3px'#00FFCC'
tap_action:
  action: toggle
entity: light.stairs
show_state: false
show_label: true
size: 20%
label: |
  [[[
    if (states['light.stairs'].state === "on")
      return "closed";
    else if (states['light.stairs'].state === "off")
      return "open";
  ]]]
4

another update i got the icons to work again but still no border

type: custom:button-card
show_entity_picture: true
state:
  - value: 'on'
    icon: mdi:lightbulb-on-outline
    color: '#00FFCC'
  - value: 'off'
    icon: mdi:lightbulb-outline
    color: white
  - state: |
      [[[
        if (states['light.stairs'].state === "on")
         return "-'-webkit-box-shadow': 0px 0px 9px 3px'#00FFCC'";
         return box-shadow: 0px 0px 9px 3px'#00FFCC'";
        else if (states['light.stairs'].state === "off")
         return "-'-webkit-box-shadow': 0px 0px 9px 3px white";
         return box-shadow: 0px 0px 9px 3pxwhite";
      ]]]
tap_action:
  action: toggle
entity: light.stairs
show_state: false
show_label: true
size: 20%
label: |
  [[[
    if (states['light.stairs'].state === "on")
      return "on";
    else if (states['light.stairs'].state === "off")
      return "of";
  ]]]
5

okay i thought this might work but thats a nope aswell

type: custom:button-card
show_entity_picture: true
state:
  - value: 'on'
    icon: mdi:lightbulb-on-outline
    color: '#00FFCC'
  - '-webkit-box-shadow''': 0px 0px 9px 3px'#00FFCC'
    box-shadow: 0px 0px 9px 3px'#00FFCC'
    state: null
  - value: 'off'
    icon: mdi:lightbulb-outline
    color: white
  - '-webkit-box-shadow''': 0px 0px 9px 3px white"
    box-shadow: 0px 0px 9px 3pxwhite"
tap_action:
  action: toggle
entity: light.stairs
show_state: false
show_label: true
size: 20%
label: |
  [[[
    if (states['light.stairs'].state === "on")
      return "on";
    else if (states['light.stairs'].state === "off")
      return "of";
  ]]]
6

i sort of got it still not quite the look i wanted but you take what ya get
ill leave the code heave here for any one who needs it

type: custom:button-card
show_entity_picture: true
state:
  - value: 'on'
    icon: mdi:lightbulb-on-outline
    color: '#00FFCC'
    state: null
  - value: 'off'
    icon: mdi:lightbulb-outline
    color: white
styles:
  card:
    - border-radius: 4
    - border: |
        [[[
         if (states['light.kitchen_right'].state === "on") 
         return '3px solid #00FFCC';
         else return '3px solid white';
        ]]]
tap_action:
  action: toggle
entity: light.kitchen_right
show_state: false
show_label: true
size: 20%
label: |
  [[[
    if (states['light.kitchen_right'].state === "on") return "on";
    else if (states['light.kitchen_right'].state === "off") return "of";
  ]]]
7

I found this thread this morning after looking for a similar solution and found out that the placing of the state on styles is wrong for this to do both the color of the icon and the color of the border. The styling should go under states and not under the general styles. I also noticed that the icon was wrongly placed making it not pick up the different icon for state changes. The following should do the trick for you :slight_smile: I also made the box shadow the same color as the icon when turned on. I’m not sure if that is what you wanted, but you can always change/delete that part.

type: custom:button-card
entity: light.huiskamer
tap_action:
  action: toggle
show_state: false
show_label: true
size: 50%
show_entity_picture: true
icon: |
  [[[
    if (states['light.huiskamer'].state === "on")
     return "mdi:lightbulb-on-outline";
    else if (states['light.huiskamer'].state === "off")
      return "mdi:lightbulb-outline";
  ]]] 
state:
  - value: 'on'
    color: '#00FFCC'
    styles:
      card:
        - box-shadow: 0px 0px 9px 3px rgb(0,255,204)
        - height: 80px
        - width: 80px
        - margin: 15px 0px 15px 10px
  - value: 'off'
    color_type: icon
    color: rgb(255, 255, 255)
    styles:
      card:
        - box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
        - height: 80px
        - width: 80px
        - margin: 15px 0px 15px 10px
label: |
  [[[
    if (states['light.huiskamer'].state === "on")
     return "on";
    else if (states['light.huiskamer'].state === "off")
      return "off";
  ]]]