From 1191764250c6079b2b99b390345963f6df122f98 Mon Sep 17 00:00:00 2001
From: Branden <ammmze@gmail.com>
Date: Thu, 21 Feb 2019 19:50:15 -0700
Subject: [PATCH 1/4] updating to support HA 0.88

---
 button-card.js | 80 +++++++++++++++++++++++++-------------------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/button-card.js b/button-card.js
index ef15ed9..3585727 100644
--- a/button-card.js
+++ b/button-card.js
@@ -1,5 +1,24 @@
-var LitElement = LitElement || Object.getPrototypeOf(customElements.get("hui-error-entity-row"));
+var LitElement = LitElement || Object.getPrototypeOf(customElements.get("home-assistant-main"));
 var html = LitElement.prototype.html;
+var css = LitElement.prototype.css;
+
+((ButtonBase) => {
+  customElements.define(
+    'button-card-button',
+    class extends ButtonBase {
+      static get styles() {
+        return css`
+          ${ButtonBase.styles}
+          .mdc-button {
+            height: auto;
+            padding: 8px;
+            color: inherit !important;
+          }
+        `
+      }
+    },
+  );
+})(customElements.get('mwc-button') || customElements.get('paper-button'))
 
 class ButtonCard extends LitElement {
   static get properties() {
@@ -9,6 +28,20 @@ class ButtonCard extends LitElement {
     };
   }
 
+  static get styles() {
+    return css`
+      ha-icon {
+        display: flex;
+        margin: auto;
+      }
+      button-card-button {
+        display: flex;
+        margin: auto;
+        text-align: center;
+      }
+    `;
+  }
+
   render() {
     const state = this.__hass.states[this.config.entity];
     switch (this.config.color_type) {
@@ -100,24 +133,13 @@ class ButtonCard extends LitElement {
     const color = this.buildCssColorAttribute(state, config);
     const fontColor = this.getFontColorBasedOnBackgroundColor(color);
     return html`
-    <style>
-    ha-icon {  
-      display: flex;
-      margin: auto;
-    }
-    paper-button {
-      display: flex;
-      margin: auto;
-      text-align: center;
-    }
-    </style>
     <ha-card style="color: ${fontColor};">
-      <paper-button noink style="background-color: ${color}; ${config.card_style}">
+      <button-card-button noink style="background-color: ${color}; ${config.card_style}">
       <div>
         ${config.icon ? html`<ha-icon style="width: ${config.size}; height: ${config.size};" icon="${config.icon}"></ha-icon>` : ''}
         ${config.name ? html`<span>${config.name}</span>` : ''}
        </div>
-      </paper-button>
+      </button-card-button>
     </ha-card>
     `;
   }
@@ -126,25 +148,14 @@ class ButtonCard extends LitElement {
     const color = this.buildCssColorAttribute(state, config);
     const fontColor = this.getFontColorBasedOnBackgroundColor(color);
     return html`
-    <style>
-    ha-icon {
-      display: flex;
-      margin: auto;
-    }
-    paper-button {
-      display: flex;
-      margin: auto;
-      text-align: center;
-    }
-    </style>
     <ha-card style="color: ${fontColor};" @tap="${ev => this._toggle(state, config)}">
-      <paper-button style="background-color: ${color}; ${config.card_style}">
+      <button-card-button style="background-color: ${color}; ${config.card_style}">
       <div>
         ${config.icon ? html`<ha-icon style="width: ${config.size}; height: ${config.size};" icon="${config.icon}"></ha-icon>` : ''}
         ${config.name ? html`<span>${config.name}</span>` : ''}
         ${config.show_state ? html`<span>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</span>` : ''}
        </div>
-      </paper-button>
+      </button-card-button>
     </ha-card>
     `;
   }
@@ -153,25 +164,14 @@ class ButtonCard extends LitElement {
     const color = this.buildCssColorAttribute(state, config);
     const icon = this.buildIcon(state, config);
     return html`
-    <style>
-    ha-icon {
-      display: flex;
-      margin: auto;
-    }
-    paper-button {
-      display: flex;
-      margin: auto;
-      text-align: center;
-    }
-    </style>
     <ha-card @tap="${ev => this._toggle(state, config)}">
-      <paper-button style="${config.card_style}">
+      <button-card-button style="${config.card_style}">
       <div>
         ${config.icon ? html`<ha-icon style="color: ${color}; width: ${config.size}; height: ${config.size};" icon="${icon}"></ha-icon>` : ''}
         ${config.name ? html`<div>${config.name}</div>` : ''}
         ${config.show_state ? html`<div>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</div>` : ''}
       </div>
-      </paper-button>
+      </button-card-button>
     </ha-card>
     `;
   }

From 6b7cdc4a3a8700765be9df89a9b458a1adcbde33 Mon Sep 17 00:00:00 2001
From: Branden <ammmze@gmail.com>
Date: Fri, 22 Feb 2019 07:33:43 -0700
Subject: [PATCH 2/4] wrap everything in a closure

prevent polluting the `window` and avoid conflicts with things in the `window` to resolve kuuji/button-card#64
---
 button-card.js | 383 ++++++++++++++++++++++++-------------------------
 1 file changed, 191 insertions(+), 192 deletions(-)

diff --git a/button-card.js b/button-card.js
index 3585727..07439a0 100644
--- a/button-card.js
+++ b/button-card.js
@@ -1,8 +1,7 @@
-var LitElement = LitElement || Object.getPrototypeOf(customElements.get("home-assistant-main"));
-var html = LitElement.prototype.html;
-var css = LitElement.prototype.css;
+((LitElement, ButtonBase) => {
+  var html = LitElement.prototype.html;
+  var css = LitElement.prototype.css;
 
-((ButtonBase) => {
   customElements.define(
     'button-card-button',
     class extends ButtonBase {
@@ -18,222 +17,222 @@ var css = LitElement.prototype.css;
       }
     },
   );
-})(customElements.get('mwc-button') || customElements.get('paper-button'))
-
-class ButtonCard extends LitElement {
-  static get properties() {
-    return {
-      hass: Object,
-      config: Object,
-    };
-  }
 
-  static get styles() {
-    return css`
-      ha-icon {
-        display: flex;
-        margin: auto;
-      }
-      button-card-button {
-        display: flex;
-        margin: auto;
-        text-align: center;
-      }
-    `;
-  }
+  class ButtonCard extends LitElement {
+    static get properties() {
+      return {
+        hass: Object,
+        config: Object,
+      };
+    }
 
-  render() {
-    const state = this.__hass.states[this.config.entity];
-    switch (this.config.color_type) {
-      case 'blank-card':
-        return this.blankCardColoredHtml(state, this.config);
-      case 'label-card':
-        return this.labelCardColoredHtml(state, this.config);
-      case 'card':
-        return this.cardColoredHtml(state, this.config);
-      case 'icon':
-      default:
-        return this.iconColoredHtml(state, this.config);
+    static get styles() {
+      return css`
+        ha-icon {
+          display: flex;
+          margin: auto;
+        }
+        button-card-button {
+          display: flex;
+          margin: auto;
+          text-align: center;
+        }
+      `;
+    }
+
+    render() {
+      const state = this.__hass.states[this.config.entity];
+      switch (this.config.color_type) {
+        case 'blank-card':
+          return this.blankCardColoredHtml(state, this.config);
+        case 'label-card':
+          return this.labelCardColoredHtml(state, this.config);
+        case 'card':
+          return this.cardColoredHtml(state, this.config);
+        case 'icon':
+        default:
+          return this.iconColoredHtml(state, this.config);
+      }
     }
-  }
 
 
-  getFontColorBasedOnBackgroundColor(backgroundColor) {
-    const parsedRgbColor= backgroundColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
-    const parsedBackgroundColor = parsedRgbColor ? parsedRgbColor : this.hexToRgb(backgroundColor.substring(1));
-    let fontColor = ''; // don't override by default
-    if (parsedBackgroundColor) {
-      // Counting the perceptive luminance - human eye favors green color...
-      const luminance = (0.299 * parsedBackgroundColor[1] + 0.587 * parsedBackgroundColor[2] + 0.114 * parsedBackgroundColor[3]) / 255;
-      if (luminance > 0.5) {
-        fontColor = 'rgb(62, 62, 62)'; // bright colors - black font
-      } else {
-        fontColor = 'rgb(234, 234, 234)';// dark colors - white font
+    getFontColorBasedOnBackgroundColor(backgroundColor) {
+      const parsedRgbColor= backgroundColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
+      const parsedBackgroundColor = parsedRgbColor ? parsedRgbColor : this.hexToRgb(backgroundColor.substring(1));
+      let fontColor = ''; // don't override by default
+      if (parsedBackgroundColor) {
+        // Counting the perceptive luminance - human eye favors green color...
+        const luminance = (0.299 * parsedBackgroundColor[1] + 0.587 * parsedBackgroundColor[2] + 0.114 * parsedBackgroundColor[3]) / 255;
+        if (luminance > 0.5) {
+          fontColor = 'rgb(62, 62, 62)'; // bright colors - black font
+        } else {
+          fontColor = 'rgb(234, 234, 234)';// dark colors - white font
+        }
       }
+      return fontColor;
     }
-    return fontColor;
-  }
 
-  hexToRgb(hex) {
-    var bigint = parseInt(hex, 16);
-    var r = (bigint >> 16) & 255;
-    var g = (bigint >> 8) & 255;
-    var b = bigint & 255;
+    hexToRgb(hex) {
+      var bigint = parseInt(hex, 16);
+      var r = (bigint >> 16) & 255;
+      var g = (bigint >> 8) & 255;
+      var b = bigint & 255;
 
-    return [,r,g,b];
-  }
+      return [,r,g,b];
+    }
 
 
-  buildCssColorAttribute(state, config) {
-    let color = config.color;
-    if (state) {
-      let configState = config.state ? config.state.find(configState => { return configState.value === state.state; }) : false;
-      if(configState){
-        color = configState.color ? configState.color : config.color_off;
-        if (configState.color === 'auto') {
-          color = state.attributes.rgb_color ? `rgb(${state.attributes.rgb_color.join(',')})` : configState.default_color;
-        }
-      }else{
-        if (config.color === 'auto') {
-          color = state.attributes.rgb_color ? `rgb(${state.attributes.rgb_color.join(',')})` : config.default_color;
+    buildCssColorAttribute(state, config) {
+      let color = config.color;
+      if (state) {
+        let configState = config.state ? config.state.find(configState => { return configState.value === state.state; }) : false;
+        if(configState){
+          color = configState.color ? configState.color : config.color_off;
+          if (configState.color === 'auto') {
+            color = state.attributes.rgb_color ? `rgb(${state.attributes.rgb_color.join(',')})` : configState.default_color;
+          }
+        }else{
+          if (config.color === 'auto') {
+            color = state.attributes.rgb_color ? `rgb(${state.attributes.rgb_color.join(',')})` : config.default_color;
+          }
+          color = state.state === 'on' ? color : config.color_off;
         }
-        color = state.state === 'on' ? color : config.color_off;
       }
+      return color;
     }
-    return color;
-  }
 
-  buildIcon(state, config) {
-    let iconOff = config.icon;
-    if (config.icon == 'attribute') {
-      if (state) {
-        const icon = state.attributes.icon;
+    buildIcon(state, config) {
+      let iconOff = config.icon;
+      if (config.icon == 'attribute') {
+        if (state) {
+          const icon = state.attributes.icon;
+          return icon;
+        }
+        return iconOff;
+      }
+      let configState = config.state ? config.state.find(configState => { return configState.value === state.state; }) : false;
+      if (configState && configState.icon) {
+        const icon = configState.icon;
         return icon;
       }
       return iconOff;
     }
-    let configState = config.state ? config.state.find(configState => { return configState.value === state.state; }) : false;
-    if (configState && configState.icon) {
-      const icon = configState.icon;
-      return icon;
-    }
-    return iconOff;
-  }
 
-  blankCardColoredHtml(state, config) {
-    const color = this.buildCssColorAttribute(state, config);
-    const fontColor = this.getFontColorBasedOnBackgroundColor(color);
-    return html`
-    <ha-card style="color: ${fontColor}; background-color: ${color}; ${config.card_style}" on-tap="${ev => this._toggle(state, config)}">
-    </ha-card>
-    `;
-  }
+    blankCardColoredHtml(state, config) {
+      const color = this.buildCssColorAttribute(state, config);
+      const fontColor = this.getFontColorBasedOnBackgroundColor(color);
+      return html`
+      <ha-card style="color: ${fontColor}; background-color: ${color}; ${config.card_style}" on-tap="${ev => this._toggle(state, config)}">
+      </ha-card>
+      `;
+    }
 
-  labelCardColoredHtml(state, config) {
-    const color = this.buildCssColorAttribute(state, config);
-    const fontColor = this.getFontColorBasedOnBackgroundColor(color);
-    return html`
-    <ha-card style="color: ${fontColor};">
-      <button-card-button noink style="background-color: ${color}; ${config.card_style}">
-      <div>
-        ${config.icon ? html`<ha-icon style="width: ${config.size}; height: ${config.size};" icon="${config.icon}"></ha-icon>` : ''}
-        ${config.name ? html`<span>${config.name}</span>` : ''}
-       </div>
-      </button-card-button>
-    </ha-card>
-    `;
-  }
+    labelCardColoredHtml(state, config) {
+      const color = this.buildCssColorAttribute(state, config);
+      const fontColor = this.getFontColorBasedOnBackgroundColor(color);
+      return html`
+      <ha-card style="color: ${fontColor};">
+        <button-card-button noink style="background-color: ${color}; ${config.card_style}">
+        <div>
+          ${config.icon ? html`<ha-icon style="width: ${config.size}; height: ${config.size};" icon="${config.icon}"></ha-icon>` : ''}
+          ${config.name ? html`<span>${config.name}</span>` : ''}
+         </div>
+        </button-card-button>
+      </ha-card>
+      `;
+    }
 
-  cardColoredHtml(state, config) {
-    const color = this.buildCssColorAttribute(state, config);
-    const fontColor = this.getFontColorBasedOnBackgroundColor(color);
-    return html`
-    <ha-card style="color: ${fontColor};" @tap="${ev => this._toggle(state, config)}">
-      <button-card-button style="background-color: ${color}; ${config.card_style}">
-      <div>
-        ${config.icon ? html`<ha-icon style="width: ${config.size}; height: ${config.size};" icon="${config.icon}"></ha-icon>` : ''}
-        ${config.name ? html`<span>${config.name}</span>` : ''}
-        ${config.show_state ? html`<span>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</span>` : ''}
-       </div>
-      </button-card-button>
-    </ha-card>
-    `;
-  }
+    cardColoredHtml(state, config) {
+      const color = this.buildCssColorAttribute(state, config);
+      const fontColor = this.getFontColorBasedOnBackgroundColor(color);
+      return html`
+      <ha-card style="color: ${fontColor};" @tap="${ev => this._toggle(state, config)}">
+        <button-card-button style="background-color: ${color}; ${config.card_style}">
+        <div>
+          ${config.icon ? html`<ha-icon style="width: ${config.size}; height: ${config.size};" icon="${config.icon}"></ha-icon>` : ''}
+          ${config.name ? html`<span>${config.name}</span>` : ''}
+          ${config.show_state ? html`<span>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</span>` : ''}
+         </div>
+        </button-card-button>
+      </ha-card>
+      `;
+    }
 
-  iconColoredHtml(state, config) {
-    const color = this.buildCssColorAttribute(state, config);
-    const icon = this.buildIcon(state, config);
-    return html`
-    <ha-card @tap="${ev => this._toggle(state, config)}">
-      <button-card-button style="${config.card_style}">
-      <div>
-        ${config.icon ? html`<ha-icon style="color: ${color}; width: ${config.size}; height: ${config.size};" icon="${icon}"></ha-icon>` : ''}
-        ${config.name ? html`<div>${config.name}</div>` : ''}
-        ${config.show_state ? html`<div>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</div>` : ''}
-      </div>
-      </button-card-button>
-    </ha-card>
-    `;
-  }
+    iconColoredHtml(state, config) {
+      const color = this.buildCssColorAttribute(state, config);
+      const icon = this.buildIcon(state, config);
+      return html`
+      <ha-card @tap="${ev => this._toggle(state, config)}">
+        <button-card-button style="${config.card_style}">
+        <div>
+          ${config.icon ? html`<ha-icon style="color: ${color}; width: ${config.size}; height: ${config.size};" icon="${icon}"></ha-icon>` : ''}
+          ${config.name ? html`<div>${config.name}</div>` : ''}
+          ${config.show_state ? html`<div>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</div>` : ''}
+        </div>
+        </button-card-button>
+      </ha-card>
+      `;
+    }
 
-  setConfig(config) {
-    // if (!config.entity) {
-    //   throw new Error('You need to define entity');
-    // }
-    this.config = {...config};
-    this.config.color = config.color ? config.color : 'var(--primary-text-color)';
-    this.config.size = config.size ? config.size : '40%';
-    let cardStyle = '';
-    if (config.style) {
-      config.style.forEach((cssObject) => {
-        const attribute = Object.keys(cssObject)[0];
-        const value = cssObject[attribute];
-        cardStyle += `${attribute}: ${value};\n`;
-      });
+    setConfig(config) {
+      // if (!config.entity) {
+      //   throw new Error('You need to define entity');
+      // }
+      this.config = {...config};
+      this.config.color = config.color ? config.color : 'var(--primary-text-color)';
+      this.config.size = config.size ? config.size : '40%';
+      let cardStyle = '';
+      if (config.style) {
+        config.style.forEach((cssObject) => {
+          const attribute = Object.keys(cssObject)[0];
+          const value = cssObject[attribute];
+          cardStyle += `${attribute}: ${value};\n`;
+        });
+      }
+      this.config.color_type = config.color_type ? config.color_type : 'icon';
+      this.config.color_off = config.color_off ? config.color_off : 'var(--disabled-text-color)';
+      this.config.default_color = config.default_color ? config.default_color : 'var(--primary-text-color)';
+      this.config.card_style = cardStyle;
+      this.config.name = config.name ? config.name : '';
     }
-    this.config.color_type = config.color_type ? config.color_type : 'icon';
-    this.config.color_off = config.color_off ? config.color_off : 'var(--disabled-text-color)';
-    this.config.default_color = config.default_color ? config.default_color : 'var(--primary-text-color)';
-    this.config.card_style = cardStyle;
-    this.config.name = config.name ? config.name : '';
-  }
 
-  // The height of your card. Home Assistant uses this to automatically
-  // distribute all cards over the available columns.
-  getCardSize() {
-    return 3;
-  }
+    // The height of your card. Home Assistant uses this to automatically
+    // distribute all cards over the available columns.
+    getCardSize() {
+      return 3;
+    }
 
-  _toggle(state, config) {
-    switch (config.action) {
-      case 'toggle':
-        this.hass.callService('homeassistant', 'toggle', {
-          entity_id: state.entity_id,
-        });
-        break;
-      case 'more_info': {
-        const node = this.shadowRoot;
-        const options = {};
-        const detail = { entityId: state.entity_id };
-        const event = new Event('hass-more-info', {
-          bubbles: options.bubbles === undefined ? true : options.bubbles,
-          cancelable: Boolean(options.cancelable),
-          composed: options.composed === undefined ? true : options.composed,
-        });
-        event.detail = detail;
-        node.dispatchEvent(event);
-        return event;
+    _toggle(state, config) {
+      switch (config.action) {
+        case 'toggle':
+          this.hass.callService('homeassistant', 'toggle', {
+            entity_id: state.entity_id,
+          });
+          break;
+        case 'more_info': {
+          const node = this.shadowRoot;
+          const options = {};
+          const detail = { entityId: state.entity_id };
+          const event = new Event('hass-more-info', {
+            bubbles: options.bubbles === undefined ? true : options.bubbles,
+            cancelable: Boolean(options.cancelable),
+            composed: options.composed === undefined ? true : options.composed,
+          });
+          event.detail = detail;
+          node.dispatchEvent(event);
+          return event;
+        }
+        case 'service':
+          this.hass.callService(config.service.domain, config.service.action, config.service.data);
+          break;
+        default:
+          this.hass.callService('homeassistant', 'toggle', {
+            entity_id: state.entity_id,
+          });
+          break;
       }
-      case 'service':
-        this.hass.callService(config.service.domain, config.service.action, config.service.data);
-        break;
-      default:
-        this.hass.callService('homeassistant', 'toggle', {
-          entity_id: state.entity_id,
-        });
-        break;
     }
   }
-}
 
-customElements.define('button-card', ButtonCard);
+  customElements.define('button-card', ButtonCard);
+})(window.LitElement || Object.getPrototypeOf(customElements.get("home-assistant-main")), customElements.get('mwc-button') || customElements.get('paper-button'));

From 47aab8318f2b99fa0546d82d93c1d97b97c99c0f Mon Sep 17 00:00:00 2001
From: Branden <ammmze@gmail.com>
Date: Fri, 22 Feb 2019 07:58:35 -0700
Subject: [PATCH 3/4] move styles to the inner div

moving the styles to the inner div should allow us to override with custom `styles`
---
 button-card.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/button-card.js b/button-card.js
index 07439a0..7a99440 100644
--- a/button-card.js
+++ b/button-card.js
@@ -10,7 +10,7 @@
           ${ButtonBase.styles}
           .mdc-button {
             height: auto;
-            padding: 8px;
+            padding: 0;
             color: inherit !important;
           }
         `
@@ -37,6 +37,9 @@
           margin: auto;
           text-align: center;
         }
+        button-card-button div {
+          padding: 8px;
+        }
       `;
     }
 
@@ -132,8 +135,8 @@
       const fontColor = this.getFontColorBasedOnBackgroundColor(color);
       return html`
       <ha-card style="color: ${fontColor};">
-        <button-card-button noink style="background-color: ${color}; ${config.card_style}">
-        <div>
+        <button-card-button noink style="background-color: ${color}">
+        <div style="${config.card_style}">
           ${config.icon ? html`<ha-icon style="width: ${config.size}; height: ${config.size};" icon="${config.icon}"></ha-icon>` : ''}
           ${config.name ? html`<span>${config.name}</span>` : ''}
          </div>
@@ -148,7 +151,7 @@
       return html`
       <ha-card style="color: ${fontColor};" @tap="${ev => this._toggle(state, config)}">
         <button-card-button style="background-color: ${color}; ${config.card_style}">
-        <div>
+        <div style="${config.card_style}">
           ${config.icon ? html`<ha-icon style="width: ${config.size}; height: ${config.size};" icon="${config.icon}"></ha-icon>` : ''}
           ${config.name ? html`<span>${config.name}</span>` : ''}
           ${config.show_state ? html`<span>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</span>` : ''}
@@ -164,7 +167,7 @@
       return html`
       <ha-card @tap="${ev => this._toggle(state, config)}">
         <button-card-button style="${config.card_style}">
-        <div>
+        <div style="${config.card_style}">
           ${config.icon ? html`<ha-icon style="color: ${color}; width: ${config.size}; height: ${config.size};" icon="${icon}"></ha-icon>` : ''}
           ${config.name ? html`<div>${config.name}</div>` : ''}
           ${config.show_state ? html`<div>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</div>` : ''}

From 6ed998df8669cd44bd031602822e88a03ed3b29b Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Fri, 22 Feb 2019 17:11:52 -0700
Subject: [PATCH 4/4] update button default styles

Co-Authored-By: ammmze <ammmze@gmail.com>
---
 button-card.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/button-card.js b/button-card.js
index 7a99440..857d5de 100644
--- a/button-card.js
+++ b/button-card.js
@@ -38,7 +38,9 @@
           text-align: center;
         }
         button-card-button div {
-          padding: 8px;
+          padding: 4%;
+          text-transform: none;
+          font-size: 1.2rem;
         }
       `;
     }