Hi guys,
Is it possible to create the above button? I’ve trawled the forum and can’t find/workout how to achieve it.
Could you kind folk help me out. (Do it for me). My head is spinning!!
I’m trying with custom button card from HACS
Much appreciated in advance
I sussed it out.
type: custom:button-card
entity: binary_sensor.kitchen_motion
icon: mdi:faucet
aspect_ratio: 1/1
name: Kitchen
styles:
card:
- background-color:
- border-radius: 10%
- padding: 10%
- color: white
- font-size: 10px
- text-shadow: null
- text-transform: null
- height: 102px
grid:
- grid-template-areas: '"temp temp" "i i" "n n"'
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr
name:
- font-weight: null
- font-size: 12px
- color: white
- align-self: null
- justify-self: null
- padding-left: 20px
img_cell:
- justify-content: null
- align-items: null
- margin: none
icon:
- color: |
[[[
if (states['light.kitchen'].state == 'on') return 'yellow';
else return 'grey';
]]]
- width: 100%
- margin-top: 5%
- margin-left: 50%
custom_fields:
temp:
- align-self: null
- justify-self: null
- margin-left: 50%
state:
- value: 'on'
icon:
styles:
card:
- background-color: blue
- filter: opacity(100%)
- height: 102px
- animation: blink 1s ease infinite
custom_fields:
temp: |
[[[
return `</ha-icon><span>${Math.round(states['sensor.landing_multisensor_am2301_temperature'].state)}°C</span>`
]]]
1 Like