Migrate state card button to control button

src/state-summary/state-card-button.ts

@@ -1,10 +1,11 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../components/entity/ha-entity-toggle";
 import "../components/entity/state-info";
-import "../components/ha-button";
+import "../components/ha-control-button-group";
+import "../components/ha-control-button";
 import { UNAVAILABLE } from "../data/entity/entity";
 import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";
@@ -26,14 +27,14 @@ class StateCardButton extends LitElement {
           .stateObj=${stateObj}
           .inDialog=${this.inDialog}
         ></state-info>
-        <ha-button
-          appearance="plain"
-          size="small"
-          @click=${this._pressButton}
-          .disabled=${stateObj.state === UNAVAILABLE}
-        >
-          ${this.hass.localize("ui.card.button.press")}
-        </ha-button>
+        <ha-control-button-group>
+          <ha-control-button
+            .disabled=${stateObj.state === UNAVAILABLE}
+            @click=${this._pressButton}
+          >
+            ${this.hass.localize("ui.card.button.press")}
+          </ha-control-button>
+        </ha-control-button-group>
       </div>
     `;
   }
@@ -46,7 +47,24 @@ class StateCardButton extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return haStyle;
+    return [
+      haStyle,
+      css`
+        ha-control-button-group > ha-control-button {
+          --control-button-padding: var(--ha-space-4);
+        }
+        ha-control-button {
+          --control-button-focus-color: var(
+            --feature-color,
+            var(--primary-color)
+          );
+          --control-button-icon-color: var(
+            --feature-color,
+            var(--primary-color)
+          );
+        }
+      `,
+    ];
   }
 }
 

src/state-summary/state-card-input_button.ts

@@ -1,10 +1,11 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../components/entity/ha-entity-toggle";
 import "../components/entity/state-info";
-import "../components/ha-button";
+import "../components/ha-control-button-group";
+import "../components/ha-control-button";
 import { UNAVAILABLE } from "../data/entity/entity";
 import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";
@@ -26,13 +27,14 @@ class StateCardInputButton extends LitElement {
           .stateObj=${stateObj}
           .inDialog=${this.inDialog}
         ></state-info>
-        <ha-button
-          appearance="plain"
-          @click=${this._pressButton}
-          .disabled=${stateObj.state === UNAVAILABLE}
-        >
-          ${this.hass.localize("ui.card.button.press")}
-        </ha-button>
+        <ha-control-button-group>
+          <ha-control-button
+            .disabled=${stateObj.state === UNAVAILABLE}
+            @click=${this._pressButton}
+          >
+            ${this.hass.localize("ui.card.button.press")}
+          </ha-control-button>
+        </ha-control-button-group>
       </div>
     `;
   }
@@ -45,7 +47,24 @@ class StateCardInputButton extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return haStyle;
+    return [
+      haStyle,
+      css`
+        ha-control-button-group > ha-control-button {
+          --control-button-padding: var(--ha-space-4);
+        }
+        ha-control-button {
+          --control-button-focus-color: var(
+            --feature-color,
+            var(--primary-color)
+          );
+          --control-button-icon-color: var(
+            --feature-color,
+            var(--primary-color)
+          );
+        }
+      `,
+    ];
   }
 }