Warum animierte Buttons sinnvoll sind

Animierte Buttons sind mehr als Dekoration. Sie machen Zustände schneller erfassbar: ein laufender Ventilator dreht sich, ein offenes Schloss leuchtet warnend, ein aktiver Schalter pulsiert. Auf Wandtablets hilft das besonders, weil man Informationen aus Entfernung erkennt.

Voraussetzungen

  • Mushroom Cards über HACS installieren.
  • card_mod installieren, wenn du CSS direkt anpassen willst.
  • Entities im YAML immer durch deine eigenen Geräte ersetzen.

Animierter Licht-Button

Dieses Beispiel nutzt eine Mushroom Light Card. Wenn das Licht an ist, bekommt das Icon eine warme Farbe und ein dezentes Leuchten. Bei ausgeschaltetem Licht bleibt die Karte ruhig.

YAML-Hilfe

Vor dem Einsetzen kurz prüfen

  • Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
  • Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
  • Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.
YAML
type: custom:mushroom-light-card
entity: light.sideboard
name: Sideboard
layout: vertical
show_brightness_control: true
use_light_color: true
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if is_state(config.entity, 'on') %}
          --shape-color: rgba(255, 193, 7, 0.22) !important;
          --icon-color: rgb(255, 193, 7) !important;
          box-shadow: 0 0 28px rgba(255, 193, 7, .55);
          animation: glow 2.4s ease-in-out infinite;
        {% else %}
          --shape-color: rgba(148, 163, 184, 0.16) !important;
          --icon-color: rgb(100, 116, 139) !important;
          animation: none;
        {% endif %}
      }
      @keyframes glow {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.06); }
      }

Animierter Lüfter-Button

Rotation eignet sich für Ventilatoren, Luftreiniger oder Pumpen. Die Animation läuft nur, wenn die Entity aktiv ist.

YAML-Hilfe

Vor dem Einsetzen kurz prüfen

  • Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
  • Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
  • Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.
YAML
type: custom:mushroom-template-card
primary: Ventilator
secondary: "{{ states('fan.wohnzimmer') }}"
icon: mdi:fan
entity: fan.wohnzimmer
tap_action:
  action: toggle
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {% if is_state('fan.wohnzimmer', 'on') %}
          animation: spin 1.2s linear infinite;
          color: rgb(14, 165, 233);
        {% else %}
          color: rgb(100, 116, 139);
        {% endif %}
      }
      @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }

Warnender Schloss-Button

Bei Sicherheitszuständen sollte die Animation sparsam und eindeutig sein. Offen bedeutet rot, geschlossen bedeutet ruhig.

YAML-Hilfe

Vor dem Einsetzen kurz prüfen

  • Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
  • Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
  • Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.
YAML
type: custom:mushroom-template-card
primary: Haustür
secondary: >
  {% if is_state('lock.haustuer', 'locked') %}
    Verriegelt
  {% else %}
    Offen oder entriegelt
  {% endif %}
icon: >
  {% if is_state('lock.haustuer', 'locked') %}
    mdi:lock
  {% else %}
    mdi:lock-open-alert
  {% endif %}
entity: lock.haustuer
tap_action:
  action: more-info
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if is_state('lock.haustuer', 'locked') %}
          --shape-color: rgba(20, 184, 166, .18) !important;
          --icon-color: rgb(20, 184, 166) !important;
        {% else %}
          --shape-color: rgba(220, 38, 38, .22) !important;
          --icon-color: rgb(220, 38, 38) !important;
          animation: alertPulse 1.4s ease-in-out infinite;
        {% endif %}
      }
      @keyframes alertPulse {
        0%, 100% { box-shadow: 0 0 0 rgba(220,38,38,0); }
        50% { box-shadow: 0 0 26px rgba(220,38,38,.6); }
      }

Gestaltungsregeln

  • Nur wichtige Zustände animieren, sonst wird das Dashboard unruhig.
  • Für Warnungen Rot/Orange nutzen, für aktive neutrale Zustände Blau/Türkis.
  • Animationen auf Tablets testen, weil schwache Geräte bei vielen CSS-Animationen ruckeln können.
  • Für konkrete Umsetzungen siehe Lock Card und Cover Card.