Can't get this custom:button-card template the way i want

[devastator]

Hi,

Got the following custom:button-card template:

type: custom:button-card
name: Openen/Sluiten
styles:
  card:
    - padding: 5px
    - background-color: var(--primary-background-color)
    - border-color: var(--primary-background-color)
  grid:
    - grid-template-areas: "'n button1'"
    - grid-template-columns: 1fr min-content
    - grid-template-rows: 1fr
  name:
    - justify-self: start
    - padding-left: 5px
    - font-weight: bold
    - font-size: 20px
custom_fields:
  button1:
    card:
      type: custom:button-card
      entity: group.sloten_woning
      size: 35px
      styles:
        card:
#         - padding: 0px
          - background-color: var(--primary-background-color)
          - border-color: var(--primary-background-color)
        grid:
          - grid-template-areas: "'i'"
          - grid-template-columns: 35px

Which looks like this:

How do I get the icon to align all to the right (and vertically centered to the text) and the text completely at the left ?

Thx for your help !

[jchh ((not John))]

Try this:

type: custom:button-card
entity: group.sloten_woning
name: Openen/Sluiten
size: 35px
styles:
  card:
    #- padding: 5px
    - background-color: var(--primary-background-color)
    - border-color: var(--primary-background-color)
  grid:
    - grid-template-areas: '". n i ."'
    - grid-template-columns: 1fr min-content min-content 1fr
    - grid-template-rows: auto
  name:
    - font-weight: bold
    - font-size: 20px

• By creating 4 columns, the 2 centre ones can be ‘pushed’ together using min-content with not need for anything else.
• No need a button in a button

The result is this (I removed the border-color to show the size):

If you unhash the padding, it looks like this:

[devastator]

Thx, but I don’t want the label to be clickable, that’s why I used the custom_field. In the future I would like to add multiple buttons.
I would like to use it as a header, where the title is on the left and a couple of shortcuts are on the right.