homeassistant

It's a custom card actually.

type: custom:button-card entity: alarm_control_panel.master show_state: false show_icon: true icon: mdi:shield-outline show_name: true show_label: true styles: grid: - grid-template-areas: | "n action_card" "l action_card" - grid-template-rows: min-content 1fr card: - overflow: hidden - padding: 1rem - background: var(--big-button-2) - backdrop-filter: var(--frost) label: - justify-self: start - align-self: start - font-family: var(--primary-font-family) - font-size: 1em - font-weight: 500 - color: var(--accent-color) img_cell: - position: absolute - top: 27% - right: 32% - overflow: visible icon: - position: absolute - width: 200px - opacity: 40% - color: var(--accent-color) - rotate: 15deg name: - justify-self: start - font-size: 1.5em - font-weight: 600 - font-family: var(--secondary-font-family) state: - value: disarmed name: Disarmed - value: armed_away name: Armed Away - value: armed_home name: Armed Home - value: arming name: Arming... styles: name: - animation: flash 2s linear infinite extra_styles: | @keyframes flash { 0% {opacity: 100%;} 50% {opacity: 0%;} 100% {opacity: 100%;} } custom_fields: action_card: card: type: custom:button-card styles: grid: - grid-template-areas: "\"item1\" \"item2\" \"item3\"" - row-gap: .5rem card: - padding: .5rem - border: none - border-radius: 1rem - background: var(--base) custom_fields: item1: card: type: custom:button-card entity: "[[[ return entity.entity_id ]]]" show_name: false show_state: false icon: mdi:shield-home styles: icon: - width: 25px - color: var(--text) card: - padding: 10px - border: none - border-radius: 500px - box-shadow: none - background: none state: - value: armed_home styles: card: - background: var(--red) icon: - color: white - animation: rotate 4s linear infinite extra_styles: | @keyframes rotate { from {transform: rotateY(-180deg);} to {transform: rotateY(360deg);} } tap_action: action: call-service service: alarm_control_panel.alarm_arm_home target: entity_id: "[[[ return entity.entity_id ]]]" data: code: "163288" item2: card: type: custom:button-card entity: "[[[ return entity.entity_id ]]]" show_name: false show_state: false icon: mdi:shield-lock styles: icon: - width: 25px - color: var(--text) card: - padding: 10px - border: none - border-radius: 500px - box-shadow: none - background: none state: - value: armed_away styles: card: - background: var(--red) icon: - color: white - animation: rotate 4s linear infinite - value: arming styles: icon: - animation: rotate 4s linear infinite card: - background: var(--peach) - animation: flash 2s linear infinite extra_styles: | @keyframes rotate { from {transform: rotateY(-180deg);} to {transform: rotateY(360deg);} } @keyframes flash { 0% {opacity: 100%;} 50% {opacity: 0%;} 100% {opacity: 100%;} } tap_action: action: call-service service: alarm_control_panel.alarm_arm_away target: entity_id: "[[[ return entity.entity_id ]]]" data: code: "163288" item3: card: type: custom:button-card entity: "[[[ return entity.entity_id ]]]" show_name: false show_state: false icon: mdi:shield-off styles: icon: - width: 25px - color: var(--text) card: - padding: 10px - border: none - border-radius: 500px - box-shadow: none - background: none state: - value: disarmed styles: card: - background: var(--red) icon: - color: white - animation: rotate 5s linear infinite tap_action: action: call-service service: alarm_control_panel.alarm_disarm target: entity_id: "[[[ return entity.entity_id ]]]" data: code: "163288" extra_styles: | @keyframes rotate { 0% { transform: rotateY(0deg); } 20% { transform: rotateY(100deg); } 40% { transform: rotateY(150deg); } 50% { transform: rotateY(180deg); } 70% { transform: rotateY(240deg); } 100% { transform: rotateY(360deg); } } extra_styles: | @keyframes rotate { from {transform: rotateY(-180deg);} to {transform: rotateY(360deg);} } @keyframes flash { 0% {opacity: 100%;} 50% {opacity: 0%;} 100% {opacity: 100%;} }