Button Sizing Issues and Questions

[poolguard]

So, i have a button (Code Below) that will be a basic thermostat button but i cannot get it to be the same size as the other "normal buttons" on the dashboard. I try to change the width and height in the card style, but it will not flow with the other cards on the page. I am working with a section style dashboard.

So, i have tried the following but i have no idea if there are correct or will even work.

Under the Styles: Card:
- grid-column: span 1
- grid-row: span 8

and
- height: 100px
- width: 100px
the height and width change the card size but when I hover over the button, it still shows a full width card and it well not "flow" with the other cards.

am I missing something stupid here?

type: custom:button-card
entity: climate.home
show_icon: false
show_state: false
name: |
[[[
return ${entity.attributes.current_temperature}°F;
]]]
styles:
card:
- text-align: center
- background-color: var(--card-background-color)
- background: rgba(0, 0, 0, 1.0);
- box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.9);
- border-style: none;
name:
- text-align: center
- padding: 10px
- font-family: Arial, sans-serif
- font-size: 40px
- font-weight: bold
- text-align: center
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(207,205,203,1.0)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(207,205,203,1.0)';
return 'white';
]]]
- text-shadow: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(98,170,224,0.9) 0px 0px 15px;';
if (entity.attributes.hvac_action === 'heating') return 'rgba(247,113,10,0.9) 0px 0px 15px;';
return 'var(--primary-text-color)';
]]]

[romankysely]

I have same issue. Is anybody who knows how to resolve pls.? Or some workaround?