Button-card removes round styling?

Configuration Frontend
1

I’ve installed Button-Card to use for my custom UI. All works well, but something is driving me nuts - all the buttons in a Button-card are rectangular, and I can’t figure out why.

I have re-installed HA in a new VM, and only have button-card as my only HACS plugin (IE: it’s CLEAN)

I create a new dashboard. I make it a Panel. I add a card: Button-card.

The card consists of just this:

type: custom:button-card
show-state: false
tap_action:
  action: null
custom_fields:
  weather_forecast:
    card:
      type: button
      entity: sensor.sun_next_noon
styles:
  card:
    - padding: 10px
    - border-radius: 100px
    - align-self: start
    - width: 1112px
    - height: 814px
    - opacity: 1
    - background-color: green
  custom_fields:
    weather_forecast:
      - position: absolute
      - top: 50px
      - left: 50px
      - width: 400px
      - height: 200px

The result in the preview is a button with rounded corners.
In the panel itself, it’s rectangular. :thinking:

I’ve tried adding styling with radius, but nothing seems to help. Am I missing something, or is this a bug?

image
image733×520 14.8 KB

2

Hi, try changing the theme, should be the cause of your issue

3

It appears to be a bug - either in the plugin, or in HA. Rolling back to 2024.3.3 fixes it.

4
  1. There is a special dedicated thread for discussing button-card.
  2. Same origin as for mod-card, layout-card, stack-in-card, …