Problem with button card styling

[derousse]

I'm not sure if I'm doing something wrong, or this is a bug.

To change a button card's bubble icon background I have to have the following:

type: custom:bubble-card
card_type: button
button_type: name
name: Temps
icon: mdi:home-thermometer-outline
icon_color: blue
tap_action:
  action: navigate
  navigation_path: "#pop-up-temps"
grid_options:
  columns: 6
  rows: 1
card_layout: large
styles: |-
  styles: |
    .bubble-icon-container {
      background: rgb(230, 128, 41);
    }
    .bubble-icon-container {
      background: rgb(230, 128, 41);
    }
    .bubble-button-card-container {
      background: rgba(12,120,50,0.5) !important;
    }

Notice the .bubble-icon-container has to be included twice for that part to work.

Also, I can't seem to change the color of the icon itself. I tried:

  .bubble-icon {
    color: blue !important;
  }

But that doesn't work.

[MrBearPresident]

I'm suprized something works at all.
You have a styles: | to much in your code.

You're on the right track. Keep going all your code works for me once I remove above mentioned error.

Final code:

type: custom:bubble-card
card_type: button
button_type: name
name: Temps
icon: mdi:home-thermometer-outline
icon_color: blue
tap_action:
  action: navigate
  navigation_path: "#pop-up-temps"
grid_options:
  columns: 6
  rows: 1
card_layout: large
styles: |-
  .bubble-icon-container {
    background: rgb(230, 128, 41);
  }

  .bubble-button-card-container {
    background: rgba(12,120,50,0.5) !important;
  }

  .bubble-icon {
    color: blue !important;
  }

---

_{If this solves your issue, please mark this as solved.}

[derousse]

Thanks for pointing out my error. I don't recall adding either of the styles lines myself, but perhaps I mistakenly copied it from somewhere. Here's my final working config:

type: custom:bubble-card
card_type: button
button_type: name
name: House Temperatures
icon: mdi:home
icon_color: blue
tap_action:
  action: navigate
  navigation_path: "#pop-up-temps"
grid_options:
  columns: 6
  rows: 1
card_layout: large
button_action:
  tap_action:
    action: navigate
    navigation_path: "#pop-up-temps"
styles: |-
  .bubble-icon-container {
     background: rgb(29, 52, 72);
   }
  .bubble-icon {
     color: rgb(33, 150, 243) !important;
   }