Hi everyone, I apologize for the lack of answers these days. I’ve been focusing on coding due to limited time. However, I want you to know that I’ve read all your messages and thank you for all your feedback! A new beta version should be released soon!
2 Likes
How did you get the 3 rows of sub buttons?
It don’t work with the interface but in yaml yes.
Exemple
type: custom:bubble-card
card_type: button
entity: cover.volet_sam
styles: |-
.bubble-button-card-container {
border-radius: 10px !important;
}
.bubble-icon {
opacity: 1;
color: white !important;
}
sub_button:
- entity: cover.volet_sam
icon: mdi:arrow-up
show_background: false
tap_action:
action: call-service
service: cover.open_cover
target:
entity_id: cover.volet_sam
- entity: cover.volet_sam
icon: mdi:stop
show_background: false
tap_action:
action: call-service
service: cover.stop_cover
target:
entity_id: cover.volet_sam
- entity: cover.volet_sam
icon: mdi:arrow-down
show_background: false
tap_action:
action: call-service
service: cover.close_cover
target:
entity_id: cover.volet_sam
show_state: true
show_last_changed: true
show_attribute: true
attribute: current_position
button_type: state
tap_action:
action: toggle
double_tap_action:
action: more-info
button_action:
double_tap_action:
action: more-info
hold_action:
action: toggle
name: Salle à Manger
You can adapt the css of the two lines to make three in custum styles
Exemple:
type: custom:bubble-card
card_type: button
button_type: state
entity: light.salon_lumieres
sub_button:
- entity: sensor.salon_th_temperature
icon: mdi:thermometer
show_state: true
show_background: false
- entity: sensor.salon_th_humidity
show_background: false
show_last_changed: false
show_state: true
icon: mdi:water
- show_background: true
show_icon: true
show_name: false
tap_action:
action: none
show_attribute: false
attribute: brightness
entity: binary_sensor.fenetres_salon
icon: ''
- entity: light.salon_lumieres_hautes
icon: mdi:chevron-up
tap_action:
action: toggle
double_tap_action:
action: more-info
- entity: light.salon_lumieres_basses
icon: mdi:chevron-down
tap_action:
action: toggle
double_tap_action:
action: more-info
- entity: light.salon_lumieres
icon: ''
double_tap_action:
action: toggle
tap_action:
action: more-info
- icon: ''
double_tap_action:
action: more-info
hold_action:
action: toggle
entity: cover.salon_volets
tap_action:
action: toggle
- entity: climate.x4fp_ndeg0_fp_3
icon: mdi:radiator
tap_action:
action: navigate
navigation_path: chauffage-salon
double_tap_action:
action: more-info
- icon: mdi:air-conditioner
double_tap_action:
action: more-info
hold_action:
action: toggle
entity: climate.daikinsalon
tap_action:
action: navigate
navigation_path: climatisation-salon
tap_action:
action: toggle
double_tap_action:
action: more-info
name: Salon
show_last_changed: true
styles: >+
.bubble-button-card-container {
border-radius: 10px !important;
background: rgba(0,190,240,0.4);
}
.bubble-icon {
opacity: 1;
color: white !important;
}
.large .bubble-button-card-container {
height: 120px;
}
.rows-2 .bubble-sub-button-container {
flex-direction: column;
gap: 4px !important;
display: grid !important;
grid-template-columns: repeat(3, min-content);
grid-template-rows: repeat(3, 1fr);
grid-auto-flow: column;
width: auto;
padding-right: 1px;
align-items: center;
justify-items: center;
}
.rows-2 .bubble-sub-button {
height: 35px !important;
}
${subButtonIcon[2].setAttribute("icon",
hass.states['binary_sensor.fenetres_salon'].state === 'on' ?
'phu:double-window-open' : 'phu:double-window-closed')}
card_layout: large-2-rows
icon: mdi:sofa
show_state: true
scrolling_effect: false
Perfect, Thanks for that.
All I need to do know is work out how to change the background colours of the sub buttons based upon their states, don’t suppose you know how to do that?
This is not possible in the current beta, but I’ve already fixed that. I’m doing my best to release the new one as soon as I can! 
Hi,
I am trying to change the sub-button icon depending on that state of the corresponding entity with the following code:
styles: >+
.rows-2 .bubble-sub-button {
${subButtonIcon[1].setAttribute("icon",
hass.states['cover.sonnenrollo'].state === 'open' ?
'mdi:window-shutter-open' : 'mdi:window-shutter')}
}
When I use the „Bubble-Button“-Card the code works. When I am trying to implement this to the header of a „Bubble-Popup“-Card it does not…
Does it work on the header of a popup at all?
Cloos you are a star and really appreciate the work you are doing on this, I only wish I had a fraction of your skills and could help!
1 Like
Thanks. Also, would it possible to have the Button Switch to have the same Light state background as the Button Slider, or some sort of gradient effect?
I’ve fixed that too and many other issues!
1 Like
Maybe this is a new feature request but is it possible to add entities instead of buttons as sub-buttons?
My idea is to have a button for a space and have the humidity and temp status as well on the right side.
Thanks, can you share how that was done?
Its possibly already been mentioned but couldn’t find it in the thread but how do you change the font-colour on the button card?
How can I change the sub-buttons from a 2x2 grid to 1x4 (1 column, 4 rows)?
I’m trying to adapt this to have 1 column but 3 or 4 rows, but changing the numbers in the CSS you provided doesn’t seem to be doing anything, other than adding a blank row in between the existing rows of 2 columns. Any suggestions?
type: custom:bubble-card
card_type: button
button_type: state
entity: light.salon_lumieres
sub_button:
- show_background: true
show_icon: true
show_name: false
tap_action:
action: none
show_attribute: false
attribute: brightness
entity: binary_sensor.fenetres_salon
icon: ''
- entity: light.salon_lumieres_hautes
icon: mdi:chevron-up
tap_action:
action: toggle
double_tap_action:
action: more-info
- entity: light.salon_lumieres
- entity: light.salon_lumieres
tap_action:
action: toggle
double_tap_action:
action: more-info
name: Salon
show_last_changed: true
styles: >+
.bubble-button-card-container {
border-radius: 10px !important;
background: rgba(0,190,240,0.4);
}
.bubble-icon {
opacity: 1;
color: white !important;
}
.large .bubble-button-card-container {
height: 180px;
}
.rows-2 .bubble-sub-button-container {
flex-direction: column;
gap: 4px !important;
display: grid !important;
grid-template-columns: repeat(1, min-content);
grid-template-rows: repeat(4, 1fr);
grid-auto-flow: column;
width: auto;
padding-right: 1px;
align-items: center;
justify-items: center;
}
.rows-2 .bubble-sub-button {
height: 35px !important;
}
${subButtonIcon[2].setAttribute("icon",
hass.states['binary_sensor.fenetres_salon'].state === 'on' ? 'phu:double-window-open' : 'phu:double-window-closed')}
card_layout: large-2-rows
icon: mdi:sofa
show_state: true
scrolling_effect: false
Like that ?
Bubble Card 2 - The True And Last One? 
If you missed it, you can take a look at the 2.0.0-beta.1 (huge) full changelog here.
Version 2.0.0-beta.9
Hi everyone!
The past two weeks have been incredibly busy for me, but I’m excited to finally present the latest (and possibly final?) beta for Bubble Card 2!
I really took my time to test it further and I’m hopeful that this version will meet all expectations! 
I can’t wait for your feedback as always and here is another extensive changelog:
New features
-
Added the
cardvariable for the custom styles, it returns the card element in the DOM. For example you can now change the color of a sub-button when a pop-up is open, like this:${window.addEventListener('location-changed', () => { card.querySelector('.bubble-sub-button-1').style.backgroundColor = this.location.href.includes('#kitchen') ? 'blue' : ''; })}
Bug fixes and optimizations
- Fixed an issue where the editor doesn’t work when a sub-button has an action to call a service #514
- Fixed some CSS issues for the separator card
- Fixed the behavior of the sliders in some cases #208
- Added haptic feedback on everything, they are also smoother!
- Button tap action added to the pop-up header in the editor
- Pop-up header z-index increased for better layering
- Double-tap action delay reduced from 300ms to 200ms for quicker tap-action
- Regression fixed: Buttons set to Name/Text now correctly use Button Actions #517
- Default cursor implemented for tap action when none is specified
- Default tap actions corrected in the editor
- No delay implemented if double tap is set to none (finally!)
- Media player buttons are now hidden when the media player is off
- Fixed an issue where hiding previous and power button of the media player card was not working #523.
- Pop-up header button switch background color now changes based on the entity state
- Columns and rows labels replaced with fractions for clarity (e.g., 1/4)
- Fixed an issue where states were not updating anymore #511
- If a sub-button is added without defining an icon, the icon of the sub-button entity will be used
- Scrolling text effect issues resolved
- Switch button color corrected when the entity is a light with a bright color
- Sub-buttons CSS no longer forced to allow custom styles
- Fixed an issue where horizontal button stack doesn’t scroll on some browsers #505 (from @brunosabot)
- Fixed an issue when a Frigate card is added inside a pop-up #513 (from @brunosabot)
I also want to say thank you to all the testers who assisted me in hunting down the remaining issues!
6 Likes
Hi Cloos and thank you so much for this awesome card! I love to use it!
But I seem to have a lot of problems with your new beta9…
Almost all of my bubbles look like this now even the pop-up headers:
The problem seems to be connected to the browser. It looks like the pictures on all my Chrome based browsers like Brave, Chromium and Chrome.
All looks good on Firefox and Safari as far as I can tell.
Does anyone else have the same problem?
This issue seems to only happens on Windows, I’ve tried it on Mac only. But I know how to fix it easily.
1 Like