I'm trying to achieve a round button that is either on or off. It renders a perfect circle when my browser zoom is 90% but as an oval at 100% (see images below). Here is the yaml:
type: custom:bubble-card
card_type: button
button_type: switch
grid_options:
columns: 2
rows: auto
scrolling_effect: false
show_name: false
icon: mdi:volume-mute
tap_action:
action: toggle
button_action:
tap_action:
action: none
card_layout: large
styles: |2-
.bubble-icon {
color: red !important;
}
.bubble-button-background {
opacity: 1 !important;
background-color: ${state === 'on' ? 'red' : 'rgb(17,17,17)'} !important;
}
entity: switch.power_control_desk_audio_mute
hold_action:
action: more-info
sub_button:
main: []
bottom: []
i'm using Bubble Card v3.2.3, windows 10, firefox 151 & chrome 148. Any tips would be appreciated, thank you!
