Custom:button-card should look like tile

Hello together,

Till now/yesterday, I experienced my person dashboard nightmare.

In my dashboard, I show some basic metrics about my house, like total solar power, battery charging power, …

Problem till now, some of these sensors are in watt, some in kW, depending on how I get the values from the system. Of course, I want to show all the values in the same unit, but I really don’t want to create new sensors, just for another unit.

Second problem I want to solve, especially the watt sensors have like 10 decimal points and I just want to display the first 2.

Third problem, sometimes like for the battery, I want to display the charging power and state of charge in the same row.

image

I was able to solve the third problem with lovelace-card-mod extension, but this creates a new problem. Here in Germany, we use “,” as decimal separator, and really I don’t want to see a “.” as decimal separator for the second value.

image

So I found the button-card extension, which solved all of my problems, but also created a new one at the same time. I’m using tiles for literally all of my sensors and other functionalities, and this button-card definitely does not look like a tile.

image

type: custom:button-card
styles:
  card:
    - border-radius: 15px
    - padding: 10px
    - background-color: var(--card-background-color)
    - box-shadow: var(--ha-card-box-shadow)
    - color: var(--primary-text-color)
  grid:
    - grid-template-areas: "\"i n\" \"i l\""
    - grid-template-columns: 30px auto
    - grid-template-rows: auto auto
  icon:
    - color: green
    - width: 30px
    - height: 30px
  name:
    - font-weight: bold
    - font-size: 16px
    - color: var(--primary-text-color)
  label:
    - font-size: 14px
    - color: var(--secondary-text-color)
entity: sensor.fronius_symo_gen24_10_0_battery_power
name: Battery
label: |
  [[[
    let powerKW = (parseFloat(states['sensor.fronius_symo_gen24_10_0_battery_power'].state) / 1000).toFixed(2);
    let batteryPercentage = parseFloat(states['sensor.byd_battery_box_premium_hv_ladezustand'].state).toFixed(2);
    return powerKW + " kW ⸱ " + batteryPercentage + " %";
  ]]]
show_label: true
numeric_precision: "2"
icon: mdi:battery-50

Does anyone know a solution to my person nightmare? I really would love to use button-card, because it offers so many possibilities, but I want them to look the same as tiles (I guess).

You can do that with a mushroom template card and that looks just like a tile card