Is it possible that only the icon changes color?
Sure!
That one is all thanks to Cloos! 
It is from the Bubble github examples.
https://github.com/Clooos/Bubble-Card
type: custom:bubble-card
card_type: button
button_type: switch
name: Vacuum
entity: vacuum.downstairs
icon: mdi:robot-vacuum
show_state: true
show_last_changed: true
tap_action:
action: more-info
button_action:
tap_action:
action: more-info
sub_button:
- name: Battery
icon: mdi:battery
show_name: false
show_icon: true
show_background: false
show_attribute: true
attribute: battery_level
- name: Return to dock
icon: mdi:home
show_background: false
tap_action:
action: call-service
service: vacuum.return_to_base
target:
entity_id: vacuum.downstairs
- name: Pause
icon: mdi:pause
show_background: false
tap_action:
action: call-service
service: vacuum.pause
target:
entity_id: vacuum.downstairs
- name: Start
icon: mdi:play
tap_action:
action: call-service
service: vacuum.start
target:
entity_id: vacuum.downstairs
styles: >-
.bubble-button-card-container {
/* Change the background color when the vacuum get an error (optional), more details in the styles template section */
background: ${state === 'error' ? 'rgb(200, 80, 40)' : ''} !important;
}
.bubble-icon {
color: white !important;
}
.bubble-icon-container {
background: rgba(230, 100, 180, 1);
}
/* Change the first sub-button battery icon based on the battery_icon attribute, more details in the styles template section */
${subButtonIcon[0].setAttribute("icon", hass.states['vacuum.downstairs'].attributes.battery_icon)}
1 Like
Bubble Card 2
v2.2.0-beta.2
Hi everyone!
I’m really sorry for the blurred backdrop issue in the previous beta, this is now fixed! I have disabled it on my dashboard and forgot to test it before the release 
By fixing this, I’ve also found a way to optimize the pop-ups and the backdrop transition even more than in the previous release!
I can’t wait for your feedback!
Bug fixes and optimizations
- Pop-up backdrop issue: Sorry again, this is now fixed! #693
- Pop-up optimizations: Pop-ups are now
much smoothermagical on all devices/browsers! #661
I can’t wait for your feedback!
And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:
2 Likes
Bubble Card 2
v2.2.0-beta.3
Hi again!
Here is a new beta, and I really believe that it is the true stable candidate. There was still an issue with the pop-up custom styles that were not synced correctly with the pop-up opening.
I’ve also reduced the card name font size by 1 pixel, they were a bit too big on the new layout.
Bug fixes and optimizations
- Pop-up custom styles: More info above.
- Font size adjustments: More info above.
I can’t wait for your feedback!
And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:
2 Likes
When can we see a vertical bubble card hihi
Hey just wondering if this is possible to make this work at the same height or not
I’ve tried this but didn’t work any help would be grateful thank you
.bubble-state::after{
content: ${hass.states['binary_sensor.livingroom_mmwave_presence'].state === 'on' ? 'url(/local/mdi-motion.png)' : ''};
display: inline-block;
color: white;
height: 10px !important;
width: 10px !important;
background-size: contain;
background-repeat: no-repeat;
}
Thanks for this example @Mar1us. Do you happen to know if there is a way to map a gradient to a value? IE I’d like the icon for my PV production to fade from red to yellow to green based on different values of the sensor.
Installed core 2024.8.1 today and noticed a small problem with the popups. When I try to close popup by swyping down I actually move the background - and not the popup - which then results in a reload of the HA-app
Is it possible to add show_background: false to the header (Name/Text) like the Sub-buttons? I’d like it to look like the separator below it, transparent.
Is it possible that some cards are only usable through manually adding the code? Like Select or Media Player?
Hi, the version you have is probably not the good one (you can see the version in the Bubble Card editor), this is probably a cache issue, clear it then everything should works as expected.
I’m currently using 2.2.0-beta.3, and do you mean clearing my browsers cache?
Yes indeed, because you should see the media player and the select card in that list.
Hi first thanks - new to this card, have it running and impressed & love it.
My question is how to (if possible) for a bubble sub button, set ONLY the background colour opacity ie not affect the button text (so that it remains readable).
I’ve tried variations of the following example code snippet which works but applies opacity setting to all on sub button ie not what I am trying to achieve.
Thanks
Example:
.bubble-sub-button-4 {
background-color: ${hass.states[‘sensor.hp_printer_scanner_yellow_ink’].state > ‘20’ ? ‘green’ : ‘red’} !important;
opacity: .5 !important;
}
Hello,
Is it possible to use variables for things like hass.formatEntityState()? I want a minimal maintenance dashboard so i don’t wanna go around changing every single thing in the style and instead just change the main entity.
I’ve tried doing hass.formatEntityState(entity) or hass.formatEntityState(state), but they show an error: Error in generating button custom templates: e is undefined
Am i doing it incorrectly or is this the expected behavior?
Bubble Card 2
v2.2.0
Hi everyone!
I’m finally able to release this new version that fixes the large layout issue in the section view since the new Home Assistant 2024.8 update. You will notice that the large layout is now shorter to fit the new changes.
But that’s not all!
There are no new features, but I’ve worked a lot on optimizations and fixes! The most noticeable improvement is the pop-ups, they were really slow in some cases and I can say that they are now much smoother magical on all devices and browsers! Opening a pop-up is now 5 to 10 times faster on some setups, and the overall CPU/RAM usage is now significantly lower too!
I really hope you will love this release!
And here is the full changelog:
Bug fixes and optimizations
- HA 2024.8 support: Fixed the large layout issue when used in a section view after the Home Assistant 2024.8 update. #688
- Pop-up optimizations: Pop-ups are now
much smoothermagical on all devices/browsers! (and even more than in the last beta!) #661 - Displayed states/attributes: Fixed and optimized the displayed states/attributes system, the order is now slightly different too.
- Templates: The
entityvariable was not defined, this is now fixed! It refers to the card entity. - Layout issue: It was impossible to hide the name or the icon in a pop-up header, this is now fixed! #638
- Font size adjustments: I’ve reduced the card name font size by 1 pixel, they were a bit too big on the new layout.
- Pop-up header issue: The pop-up header was overlapping the UI in dashboard edit mode, this is now fixed! #666
- Pop-up timeout issue: Fixed an issue when multiple pop-ups have an auto-close value. #685
- Pop-up backdrop issue: It was impossible to change the backdrop blur in the editor, this is now fixed! Note: Setting it to 0 can improve pop-up performance on some setups.
- Pop-up templates: Templates in pop-up headers are now working correctly. #664
- Pop-up swipe to close issue: Closing a pop-up by swiping in it no longer results in moving the background. #699
- Tap action issue: Sub-buttons now work when all the actions are set to “No action” on the card icon. #691
I can’t wait for your feedback!
And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:
4 Likes
Hey @Cloos !
I build this button cards as new room cards, as I switched from UI-Minimalist.
Is it possible to align the sub-buttons so that they’re looking same on each bubble-card.
Thanks!
Dominik
4 Likes
I’m getting the strangest behavior, but I want to make sure it’s not an easy fix/setting before I submit a bug request. I created pop-ups for each of the four rooms (bottom four on picture), and also from the three chip cards at the top of the page.
For some reason, it shows the title of the popup cards on the right side of the screen. It used to have this problem only on mobile/tablet, but now it’s also showing in Firefox on my PC. I just upgraded to the latest release: 2.2.0. I also added the Pop-Up Initiation fix from the Github page. All no luck.
To add to the oddity, when I click on one of the buttons to open up a popup, and then I close the popup, the label on the right side goes away. Apparently this happens device by device. Opening popups on my desktop didn’t remove them from my tablet. However, when I open a popup on my tablet, the text on the side goes away. When I refresh the page, the right-side labels come back.
Is there something I’m missing? A setting I should review?
Hi, I forgot to fix this but for now just don’t use these titles for your pop-ups, this HA feature is not supported yet.
Thank you and no problem. I just deleted the titles for now. Do you want me to open a Github issue on it for tracking?