Transparant buttons instead of white

Configuration Frontend
1

I have configured my Frontend to my licking sofar. But I try to get the button transparant instead of white. How can I make it transparant?

type: custom:mushroom-lock-card
entity: lock.schuur
grid_options:
  columns: 12
  rows: 1
layout: horizontal
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {# ========== USER CONFIG ========== #}
        {# true = number mode, false = state mode #}
        {% set use_number      = false %}

        {# STATE MODE SETTINGS #}
        {% set state_entity    = 'lock.schuur' %}
        {% set active_value    = 'on' %}

        {# OPTIONAL: NUMBER MODE SETTINGS #}
        {% set number_entity   = 'lock.schuur' %}
        
        {# '>' '<' '=' '>=' '<=' #}
        {% set number_operator = '>' %}
        
        {% set threshold       = 0.0 %}
        {# ========== END USER CONFIG ====== #}


        {# ======== TRIGGER DECISION LOGIC ======== #}
        {% if use_number %}
          {% set num = states(number_entity) | float(0) %}
          {% if number_operator == '>' %}
            {% set trigger_active = (num > threshold) %}
          {% elif number_operator == '<' %}
            {% set trigger_active = (num < threshold) %}
          {% elif number_operator == '=' %}
            {% set trigger_active = (num == threshold) %}
          {% elif number_operator == '>=' %}
            {% set trigger_active = (num >= threshold) %}
          {% elif number_operator == '<=' %}
            {% set trigger_active = (num <= threshold) %}
          {% else %}
            {% set trigger_active = false %}
          {% endif %}
        {% else %}
          {# default: simple equality state trigger #}
          {% set trigger_active = (states(state_entity) == active_value) %}
        {% endif %}
        {# =========== END TRIGGER LOGIC =========== #}


        {% if trigger_active %}
          --shape-animation: doorbell-ring 0.9s ease-out infinite;
          opacity: 1;
        {% else %}
          --shape-animation: none;
          opacity: 0.8;
        {% endif %}

        transform-origin: 50% 50%;
      }

      @keyframes doorbell-ring {
        0% {
          transform: scale(1.05);
          box-shadow:
            0 0 0 0 rgba(var(--rgb-{{ config.icon_color }}), 1),
            0 0 0 0 rgba(var(--rgb-{{ config.icon_color }}), 0.8),
            0 0 0 0 rgba(var(--rgb-{{ config.icon_color }}), 0.4);
        }
        30% {
          transform: scale(0.95);
          box-shadow:
            0 0 0 4px  rgba(var(--rgb-{{ config.icon_color }}), 0.9),
            0 0 0 10px rgba(var(--rgb-{{ config.icon_color }}), 0.7),
            0 0 0 18px rgba(var(--rgb-{{ config.icon_color }}), 0.4);
        }
        60% {
          transform: scale(1.02);
          box-shadow:
            0 0 0 10px rgba(var(--rgb-{{ config.icon_color }}), 0.0),
            0 0 0 18px rgba(var(--rgb-{{ config.icon_color }}), 0.2),
            0 0 0 26px rgba(var(--rgb-{{ config.icon_color }}), 0.0);
        }
        100% {
          transform: scale(1);
          box-shadow:
            0 0 0 0 rgba(var(--rgb-{{ config.icon_color }}), 0.0),
            0 0 0 0 rgba(var(--rgb-{{ config.icon_color }}), 0.0),
            0 0 0 0 rgba(var(--rgb-{{ config.icon_color }}), 0.0);
        }
      }

      @keyframes doorbell-idle {
        0%   { transform: scale(1); }
        50%  { transform: scale(1.03); }
        100% { transform: scale(1); }
      }
    .: |
      mushroom-shape-icon {
        --icon-size: 65px;
        display: flex;
        margin: -18px 0 10px -20px !important;
        padding-right: 10px;
      }
      ha-card {
        clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
      }

Thanks for the help

2

If you were really using the button card you could define a theme - something like:

  # Changes to default theme for transparent buttons
  
  card-background-color: rgba(0,0,0,0)
  ha-card-border-color: rgba(0,0,0,0)
  ha-card-border-radius: "0px"
  ha-card-border-width: "0px"
3

Why “If you were really using…”. How is this button called in the HA language?

And where should I place this part of code?

4

You are using a custom card. If you use Home Assistant’s built-in button card you have the option of specifying a theme to be followed by the button, which can include transparency.

Personally I use the UI rather than coding dashboards, it’s much easier. :smile:

1 Like