Horizontal button stack background color #1310

Chammy9844 · 2025-03-05T21:03:09Z

Chammy9844
Mar 5, 2025

Goal

I'm sure my HA novice-ness is making me overlook something and this may be a simple YAML solution. I simply want to make specific buttons on my horizontal button stack specific colors. Not background color based on entity state. I just want it a background color I can set and maybe change the opacity of it.

Source Yaml

type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: true
1_link: "#6climate"
1_name: Climate
1_icon: mdi:home-thermometer-outline
2_link: "#6cctv"
2_name: Cameras
2_icon: mdi:cctv
3_link: "#6alarm"
3_name: Alarm
3_icon: mdi:shield-home-outline
4_link: "#6cal"
4_name: Calendar
4_icon: mdi:calendar-month-outline
5_link: "#6alp"
5_name: Amanda
5_icon: mdi:account-heart-outline
6_link: "#6base"
6_name: Basement
6_icon: mdi:washing-machine
6_entity: light.basement_lamp
6_pir_sensor: binary_sensor.basemotion_motion

Which step did you already try?

type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: true
1_link: "#6climate"
1_name: Climate
1_icon: mdi:home-thermometer-outline
2_link: "#6cctv"
2_name: Cameras
2_icon: mdi:cctv
3_link: "#6alarm"
3_name: Alarm
3_icon: mdi:shield-home-outline
4_link: "#6cal"
4_name: Calendar
4_icon: mdi:calendar-month-outline
5_link: "#6alp"
5_name: Amanda
5_icon: mdi:account-heart-outline
6_link: "#6base"
6_name: Basement
6_icon: mdi:washing-machine
6_entity: light.basement_lamp
6_pir_sensor: binary_sensor.basemotion_motion
bubble-horizontal-buttons-stack-background-color: blue !important

I tried the below yaml, changing "kitchen" in it to "climate" for my case

styles: >
  /* Selector for the '#kitchen' button */
  .kitchen > .bubble-background-color {
    background-color: blue !important;
  }

ChatGPT gave me the following, 

type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: true

1_link: /lovelace/lights
1_name: Lights
1_icon: mdi:lightbulb

2_link: /lovelace/fans
2_name: Fan
2_icon: mdi:fan

3_link: /lovelace/security
3_name: Security
3_icon: mdi:shield

card_mod:
  style: |
    ha-card div:nth-child(2) {
      background-color: rgba(255, 165, 0, 0.8) !important; /* Orange background */
      border-radius: 10px;
    }
This code changed the whole stack background, not a single button.