Ability to match style of default lovelace button

[shalak]

Is your feature request related to a problem? Please describe. The default buttons, when rendered as squares use different padding than button-card with aspect_ratio: 1/1:

Without rendering as squared, and without setting aspect_ratio we get this:

("Novigrad" is button-card, the rest are vanilla button cards )

Describe the solution you'd like Make it easily possible, to match the padding of icon and name of the vanilla button card for squares, as well height when they are not squares.

Describe alternatives you've considered I tried using ADVANCED styling options, but with no luck

[viliks]

#861 is the same problem. I fixed it using card mod.

card_mod:
  style: |
    :host {
      height: 100%
    }
    ha-card {
      height: 100%;
    }

[dcapslock]

Section support will aid in overall height of buttons. Track #854 to see how that progresses.

As to styling button-card so they are like buttons... this will be difficult as standard button uses a flex display system and button-card uses grid, which is not something that will change.

For your case I would recommend using all button-cards to achieve the same look and feel. However if you are adventurous, see below for an example of:

1. Standard btton
2. Button Card with some CSS to get as close as possible to standard button. As to what negative margin (icon) and padding (name) you use would be to suite your most commonly used display size. Some state settings using standard button-card state operators.
3. Nested standard grid/button using custom_field, using some templating to achieve what 2. achieves with standard button-card state. I don't expect that anyone would jump to this just to match standard button look and, but it does show it is possible and with further configuration template could suit if you are looking for such an advanced option.

type: vertical-stack
cards:
  - type: custom:button-card
    color_type: label-card
    color: rgb(200, 200, 214)
    name: Lights
  - type: horizontal-stack
    cards:
      - show_name: true
        show_icon: true
        type: button
        entity: switch.bed_switch
        icon: mdi:lightbulb
        name: Standard Button
        show_state: false
      - type: custom:button-card
        entity: switch.bed_switch
        icon: mdi:lightbulb
        styles:
          name:
            - padding-bottom: 1.5em
          icon:
            - margin-bottom: "-1em"
        state:
          - value: "on"
            icon: mdi:lightbulb
            color: var(--state-switch-active-color)
          - value: "off"
            icon: mdi:lightbulb-outline
            color: lightgrey
        aspect_ratio: 1/1
        show_name: true
        show_label: true
        name: Button Card
      - type: custom:button-card
        entity: switch.bed_switch
        show_icon: false
        show_name: false
        show_label: false
        styles:
          card:
            - padding: 0px
            - border: 0px
          custom_fields:
            my_button:
              - "--state-switch-off-color": lightgrey
        custom_fields:
          my_button:
            card:
              type: grid
              columns: 1
              cards:
                - type: button
                  icon: |
                    [[[
                      if (entity.state == "on") 
                        return "mdi:lightbulb"
                      else
                        return "mdi:lightbulb-outline"
                    ]]]
                  entity: switch.bed_switch
                  name: Nstd Std Button

https://github.com/user-attachments/assets/f912527c-87ec-4038-b7da-58c3c5968196