Button Card: help with border

I’m trying to create a custom button card that will show icons for two lamps and a title below. See right tile in the image below.

Basically, I want this tile to be similar to the two on the left with a border around the large square tile, but not around the individual lamp icons or the title (Family Room). Here’s my code so far:

- type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: custom:button-card
          entity: light.family_room_left_table_bulb
          icon: mdi:lamp
          show_name: false
        - type: custom:button-card
          entity: light.family_room_left_table_bulb
          icon: mdi:lamp
          show_name: false
      - type: custom:button-card
        name: Family Room

here you go
you can change the rounding of the corners in - border-radius: and the size of the name in - font-size:
with aspect_ratio: 1/1, you ensure that it is the same length on each side

image

type: custom:button-card
icon: mdi:lamp
aspect_ratio: 1/1
show_name: true
name: Family Room
entity: light.family_room_left_table_bulb
tap_action:
  action: toggle
styles:
  card:
    - border-radius: 24px
  name:
    - font-size: 40px     


and if you have colour-adjustable lamps, here’s something similar, but the card changes colour to match the lamp

image

type: custom:button-card
icon: mdi:lamp
aspect_ratio: 1/1
show_name: false
entity: light.family_room_left_table_bulb
tap_action:
  action: toggle
hold_action:
  action: more-info
styles:
  card:
    - border-radius: 24px
    - background-color: |
        [[[
          if (states['light.family_room_left_table_bulb'].state == 'on') {
            const rgb = states['light.family_room_left_table_bulb'].attributes.rgb_color;
            return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
          }
          return 'var(--contrast10)';
        ]]]
  icon:
    - color: var(--black)
card_mod:
  style: |
    :host {
      height: 100% !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      position: unset !important;
      display: grid !important;
      }

1 Like

Take a look at the stack-in-card. It is a bit old and sometimes needs the help of card_mod to remove borders and backgrounds but still useful.

[Stack-in-card] allows to group multiple cards into one card without the borders.

image

YAML code
type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      height: 250px;
    }
cards:
  - type: horizontal-stack
    cards:
    - type: custom:button-card
      entity: light.living_room1
      show_name: false
      styles:
        card:
          - border: none  
    - type: custom:button-card
      entity: light.living_room2
      show_name: false
      styles:
        card:
          - border: none
  - type: custom:button-card
    entity: light.living_room_lights
    show_icon: false
    name: Living Room
    styles:
        card:
          - border: none
        name:
          - font-size: "30px"

You may need to play with the card’s dimensions to get it to match to rest.

EDIT: As a bonus, the “title” at the bottom is another custom:button-card that can be used to toggle the living room group, for example.

1 Like

Just add border: none !important; or border-style: none !important; to the mod to remove the card border.

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      height: 250px;
      border: none !important;
         }

border: none !important;

That would remove the border from the stack-in-card, which I assumed the OP wanted to keep in order to match the other cards which is why it wasn’t included in the top card.

Then I misunderstood

@kman42 This should be a good place to start.

type: vertical-stack
cards:
    - type: horizontal-stack
      cards:
        - type: custom:button-card
          entity: light.family_room_left_table_bulb
          icon: mdi:lamp
          show_name: false
        - type: custom:button-card
          entity: light.family_room_left_table_bulb
          icon: mdi:lamp
          show_name: false
        - type: vertical-stack    
          cards:   
            - type: horizontal-stack
              cards: 
                - type: custom:button-card
                  entity: light.family_room_left_table_bulb
                  icon: mdi:lamp  
                  card_mod:
                    style: |
                     ha-card {
                        border: none !important;
                          }
                - type: custom:button-card
                  entity: light.family_room_left_table_bulb
                  icon: mdi:lamp   
                  card_mod:
                    style: |
                     ha-card {
                        border: none !important;
                          }
            - type: custom:button-card
              name: Family Room
              card_mod:
                    style: |
                     ha-card {
                        border: none !important;
                          }   

That does not do what the OP is looking for.

I’m trying to create a custom button card that will show icons for two lamps and a title below. See right tile in the image below.

Basically, I want this tile to be similar to the two on the left with a border around the large square tile, but not around the individual lamp icons or the title (Family Room).

image

This revised code uses Mushroom Light Cards for the individual lights in the stack-in-card; primary and secondary info is hidden, borders and backgrounds removed. The custom:button-card at the bottom is stylized to look like bottom of a Mushroom Light Card. Includes the original two cards on the left.

YAML Code
type: horizontal-stack
cards:
  - type: custom:mushroom-light-card
    entity: light.living_room_lights
    layout: vertical
    name: Family Room
    icon: mdi:lightbulb
  - type: custom:mushroom-light-card
    entity: light.living_room_lights
    layout: vertical
    name: Living Room
    icon: mdi:lamps
  - type: custom:stack-in-card
    card_mod:
      style: |
        ha-card {
          height: 100%;
        }
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-light-card
            entity: light.living_room1
            layout: vertical
            icon: mdi:lamp
            primary_info: none
            secondary_info: none
            card_mod:
              style: |
                ha-card {
                  border: none;
                  background: none;
                }
          - type: custom:mushroom-light-card
            entity: light.living_room2
            layout: vertical
            icon: mdi:lamp
            primary_info: none
            secondary_info: none
            card_mod:
              style: |
                ha-card {
                  border: none;
                  background: none;
                }
      - type: custom:button-card
        entity: light.living_room_lights
        name: Family Room
        show_icon: false
        show_state: true
        state_display: '[[[ return (entity.state = "on") ? `${parseInt(entity.attributes.brightness / 2.54)}%` : "Off" ]]]'
        styles:
          card:
            - border: none
            - margin-top: '-5px'
          name:
            - font-size: 14px
            - font-weight: bold
            - color: '#e1e1e1'
          state:
            - font-size: 12px
            - font-weight: bolder
            - line-height: 1.5
            - color: '#9b9b9b'
1 Like

Thanks for the edit, but he didn’t mention using the Mushroom addon.

Isn’t this more of what he was requesting for the 3rd card with only the Button addon?

type: horizontal-stack
cards:
  - type: custom:button-card
    entity: light.couch_light
    name: Family Room
    show_state: true
    aspect_ratio: 1/1
    styles:
      icon:
        - color: orange
      card:
        - background-color: '#1a1a1a'
        - font-size: 16px
  - type: custom:button-card
    entity: light.couch_light
    name: Living Room
    show_state: true
    aspect_ratio: 1/1
    styles:
      icon:
        - color: orange
      card:
        - background-color: '#1a1a1a'
        - font-size: 16px
        
  - type: custom:button-card
    tap_action:
      action: toggle
    styles:
      card:
        - background-color: '#1a1a1a'
        - font-size: 10px
      grid:
        - grid-template-areas: |
            "light1 light2 "
            "light3 light3 "
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 5.3em 1fr 1fr
        - grid-gap: 0
    custom_fields:
      light1:
        card:
          type: custom:button-card
          entity: light.pc_lights
          aspect_ratio: 2/1
          show_name: false
          icon: mdi:lamp
          tap_action:
            action: toggle
          styles:
            grid:
              - grid-template-areas: |
                  "i"
              - grid-template-columns: 1fr
              - grid-template-rows: 1fr
            card:
              - margin-top: 10px
              - padding: 0px
              - background-color: '#1a1a1a'
              - font-size: 10px
            icon:
              - height: 100%
              - color: orange
      light2:
        card:
          type: custom:button-card
          entity: light.bathroom_lights
          show_name: false
          icon: mdi:lamp
          aspect_ratio: 2/1
          tap_action:
            action: toggle
          styles:
            grid:
              - grid-template-areas: |
                  "i"
              - grid-template-columns: 1fr
              - grid-template-rows: 1fr
            card:
              - margin-top: 10px
              - padding: 0px
              - background-color: '#1a1a1a'
              - font-size: 10px
            icon:
              - height: 100%
              - color: orange
      light3:
        card:
          type: custom:button-card
          entity: light.bed_lights
          aspect_ratio: 3.7
          name: Family Room
          icon: none
          styles:
            grid:
              - grid-template-areas: |
                  "n"
              - grid-template-columns: 1fr
              - grid-template-rows: 1fr
            card:
              - margin-top: 30px
              - background-color: '#1a1a1a'
              - font-size: 16px

Thank you! This is exactly what I am looking to do. And thanks to everyone else that responded—sorry if my question wasn’t clear.

I’m not sure if I’m being trolled or what but I can play this game.

he didn’t mention using the Mushroom addon.

Look at the two cards on the left that the OP is already using; those are Mushroom Light cards

he was requesting for the 3rd card with only the Button addon?

OP may not have know about the stack-in-card, hence my suggestion in Post #4.

Isn’t this more of what he was requesting

Your design does not match the OP’s original image nor the request. You used custom:button-cards instead of the Mushroom Light cards which the OP stated “I want this tile to be similar to the two on the left”. You missed the border around the stack which was part of the request and was re-mentioned in Post 6. OP did not mention a third light; he wanted a title which in my design in Post 4 allowed toggling another light (or light group) with the use of the bottom custom:button-card (which could be easily removed if desired.).

Coming back to this one:

he was requesting for the 3rd card with only the Button addon?

Done.
image

YAML code
type: horizontal-stack
cards:
  - type: custom:mushroom-light-card
    entity: light.living_room_lights
    layout: vertical
    name: Family Room
    icon: mdi:lightbulb
  - type: custom:mushroom-light-card
    entity: light.living_room_lights
    layout: vertical
    name: Living Room
    icon: mdi:lamps
  - type: custom:button-card
    entity: light.living_room_lights
    name: Family Room
    show_icon: false
    show_state: true
    state_display: |
      [[[ return (entity.state = "on") ? `${parseInt(entity.attributes.brightness / 2.54)}%` : "Off" ]]]
    styles:
      card:
        - padding-top: 0
      grid:
        - grid-template-areas: '"button1 button2" "n n" "s s"'
        - grid-template-rows: min-content min-content
        - grid-template-columns: 1fr 1fr
      name:
        - font-size: 14px
        - font-weight: bold
        - color: '#e1e1e1'
        - margin-top: '4px'
        - margin-bottom: '0px'
      state:
        - font-size: 12px
        - font-weight: bolder
        - color: '#9b9b9b'
        - margin-top: '2px'
        - margin-bottom: '8px'
      button1:
        - padding: 0
      button2: 
        - padding: 0
    custom_fields:
      button1:
        card:
          type: custom:mushroom-light-card
          entity: light.living_room1
          layout: vertical
          icon: mdi:lamp
          primary_info: none
          secondary_info: none
          card_mod:
            style: |
              ha-card {
                border: none;
                background: none;
              }
      button2:
        card:
          type: custom:mushroom-light-card
          entity: light.living_room2
          layout: vertical
          icon: mdi:lamp
          primary_info: none
          secondary_info: none
          card_mod:
            style: |
              ha-card {
                border: none;
                background: none;
              }