Need assistance to add colored background to buttons inside stack-in-card

Configuration
1

I currently have a horizontal stack-in-card that looks like this:
Screensho-Nowt

I am trying to get the buttons to actually look like buttons (with a colored background and/or border-shadow. So they look more like this:
Screenshot-regular

Here’s my code for stack-in-card below:

cards:
  - cards:
      - color: 'rgb(66, 134, 244)'
        color_type: card
        hold_action:
          action: call-service
        icon: 'mdi:power'
        name: 'ON'
        styles:
          card:
            - font-size: 12px
            - font-weight: bold
            - height: 53px
            - color: lightblue
        tap_action:
          action: call-service
          service: shell_command.ac_power_on
        type: 'custom:button-card'
      - color: 'rgb(66, 134, 244)'
        color_type: card
        hold_action:
          action: call-service
        icon: 'mdi:power'
        name: 'OFF'
        styles:
          card:
            - font-size: 12px
            - font-weight: bold
            - height: 53px
            - color: darkgray
        tap_action:
          action: call-service
          service: shell_command.ac_power_off
        type: 'custom:button-card'
      - color: 'rgb(66, 134, 244)'
        color_type: card
        hold_action:
          action: call-service
        icon: 'mdi:arrow-down-bold'
        name: MILD
        styles:
          card:
            - font-size: 12px
            - font-weight: bold
            - height: 53px
        tap_action:
          action: call-service
          service: shell_command.ac_temp_78
        type: 'custom:button-card'
      - color: 'rgb(66, 134, 244)'
        color_type: card
        hold_action:
          action: call-service
        icon: 'mdi:arrow-up-bold'
        name: MAX
        styles:
          card:
            - font-size: 12px
            - font-weight: bold
            - height: 53px
        tap_action:
          action: call-service
          service: shell_command.ac_temp_73
        type: 'custom:button-card'
    type: horizontal-stack
mode: vertical
title: Portable Air Conditioner
type: 'custom:stack-in-card'

As you can see, the lines where I have - color: ‘rgb(66, 134, 244)’, don’t make any difference. I also tried using card-mod and inserting the below code to my buttons; however, it’s not making any difference either:

style: |
   ha-card {
       background-color: 'rgb(66, 134, 244)';
   }

I’d really appreciate help to add a color background to each button.

2

Thanks to u/js21cfc from the reddit Home Assistant forum, he gave me the code that was necessary to do this:

Here’s the final result:

Screenshot
Screenshot528×653 62.6 KB

Here’s the enhanced code:

cards:
  - cards:
      - color: 'rgb(66, 134, 200, 0.15)'
        color_type: card
        hold_action:
          action: call-service
        icon: 'mdi:power'
        name: 'ON'
        styles:
          card:
            - font-size: 12px
            - font-weight: bold
            - height: 51px
            - color: lightblue
            - '--keep-background': 'true'
            - background: CSS-value
            - box-shadow: CSS-value
        tap_action:
          action: call-service
          service: shell_command.ac_power_on
        type: 'custom:button-card'
      - color: 'rgb(66, 134, 200, 0.15)'
        color_type: card
        hold_action:
          action: call-service
        icon: 'mdi:power'
        name: 'OFF'
        styles:
          card:
            - font-size: 12px
            - font-weight: bold
            - height: 51px
            - color: darkgray
            - '--keep-background': 'true'
            - background: CSS-value
            - box-shadow: CSS-value
        tap_action:
          action: call-service
          service: shell_command.ac_power_off
        type: 'custom:button-card'
      - color: 'rgb(66, 134, 200, 0.15)'
        color_type: card
        hold_action:
          action: call-service
        icon: 'mdi:arrow-down-bold'
        name: MILD
        styles:
          card:
            - font-size: 12px
            - font-weight: bold
            - height: 51px
            - '--keep-background': 'true'
            - background: CSS-value
            - box-shadow: CSS-value
        tap_action:
          action: call-service
          service: shell_command.ac_temp_78
        type: 'custom:button-card'
      - color: 'rgb(66, 134, 200, 0.15)'
        color_type: card
        hold_action:
          action: call-service
        icon: 'mdi:arrow-up-bold'
        name: MAX
        styles:
          card:
            - font-size: 12px
            - font-weight: bold
            - height: 51px
            - '--keep-background': 'true'
            - background: CSS-value
            - box-shadow: CSS-value
        tap_action:
          action: call-service
          service: shell_command.ac_temp_73
        type: 'custom:button-card'
    type: horizontal-stack
keep:
  box_shadow: true
mode: vertical
title: Portable Air Conditioner
type: 'custom:stack-in-card'
1 Like