#anyone have examples of a button card

1 messages · Page 1 of 1 (latest)

copper arrow
#

I have this

entity: sensor.charging_status
icon: mdi:car-electric
show_state: false
spin: false
state:

  • color: yellow
    spin: true
    value: charging
  • color: green
    value: connected
  • color: red
    styles:
    card:
    - animation: blink 2s ease infinite
    value: standby
    type: custom:button-card
wraith swan
# 
icon: phu:panel-glass-door2-close
color: auto
name: Back Door
tap_action:
  action: more-info
  haptic: medium
styles:
  img_cell:
    - padding-left: 50%
    - padding-right: 50%
    - justify-content: center
  card:
    - width: min(30vw, 140px)
    - height: min(30vw, 140px)
    - border-style: solid
    - border-width: 0px
    - border-color: '#0060FF'
    - border-radius: 20px
    - '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(0,0,0,0.95)
  grid:
    - grid-template-areas: '"i" "n" "s"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  icon:
    - '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(0,0,0,0.95)
  name:
    - justify-self: start
    - font-weight: bold
    - font-size: 15px
    - padding-left: 15px
    - '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(0,0,0,0.95)
  state:
    - justify-self: start
    - font-weight: bold
    - font-size: 15px
    - opacity: 0.6
    - padding: 0 15px 5px
    - '-webkit-filter': contrast(96%) drop-shadow(3px 3px 3px rgba(0,0,0,0.95)
state:
  - value: 'on'
    icon: phu:panel-glass-door2-open
    styles:
      icon:
        - '-webkit-filter': contrast(96%) drop-shadow(1px 1px 5px RGB(0,146,255)
      card:
        - box-shadow: var(--soft-ui-pressed)
        - border-style: solid
        - border-width: 2px
        - border-color: DodgerBlue
        - border-radius: 20px
        - '-webkit-filter': contrast(96%) drop-shadow(0px 0px 5px RGB(0,146,255)
show_state: true
card_mod:
  class: soft-ui
type: custom:button-card```
#

webkit filter can be removed from upper part as they are shadows, the ones under state: - value on show light around icons etc when on (a glow)

#

or you can have the glow added to the state and name when on ```state:
styles:
icon:
- '-webkit-filter': contrast(96%) drop-shadow(1px 1px 5px RGB(0,146,255)
card:
- box-shadow: var(--soft-ui-pressed)
- border-style: solid
- border-width: 2px
- border-color: DodgerBlue
- border-radius: 20px
- '-webkit-filter': contrast(96%) drop-shadow(0px 0px 5px RGB(0,146,255
name:
- '-webkit-filter': contrast(96%) drop-shadow(0px 0px 5px RGB(0,146,255
state:
- '-webkit-filter': contrast(96%) drop-shadow(0px 0px 5px RGB(0,146,255

show_state: true
card_mod:
class: soft-ui
type: custom:button-card```