Horizontal button stack overlaying each other

[dnestico]

I don't know why this is happening I've tried clearing my browser cache and still but for some reason the buttons are overlaying each other when I add more than 2 and it looks like this. Please help.

type: custom:bubble-card
card_type: horizontal-buttons-stack
1_name: Davids Room
1_icon: hue:downstairs
1_entity: light.basement_lights
2_name: V/E Room
2_icon: hue:upstairs
2_entity: light.vally_esthers_room
3_name: Media
3_icon: mdi:music-circle
style: |
  ha-card {
    margin-bottom: 62px !important;

[Clooos]

Have you tried going in edit mode since? Because when you are in this mode the size of the buttons is automatically calculated and saved in your cache, this is needed for the auto order feature. So indeed clearing your cache will always do that, but I will try to find a way to fix that.

[dnestico]

Yea this screenshot was out of edit mode, I even made new button stack but it seems to always happen its very weird. Would love it resolved so I can use it!

[Clooos]

I've just tried your code and you just need to add links to fix this. But thanks for finding this issue, I will add an error if no link is added.

This is working:

type: custom:bubble-card
card_type: horizontal-buttons-stack
1_name: Davids Room
1_icon: hue:downstairs
1_link: '#davids_room'
1_entity: light.basement_lights
2_name: V/E Room
2_icon: hue:upstairs
2_link: '#ve_room'
2_entity: light.vally_esthers_room
3_name: Media
3_icon: mdi:music-circle
3_link: '#media'
style: |
  ha-card {
    margin-bottom: 62px !important;
  }

[dnestico]

Genius, that did indeed fix it!

Now is it possible to remove the black shadow/background with card mod btw? Thanks

[Clooos]

Just add this, you don't even need card-mod :

styles: |
  .horizontal-buttons-stack::before {
    display: none !important;
  }