diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts
index 703ad164cf..b7eddb962c 100644
--- a/src/panels/lovelace/cards/hui-button-card.ts
+++ b/src/panels/lovelace/cards/hui-button-card.ts
@@ -187,8 +187,6 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
     return html`
       <ha-card
         @action=${this._handleAction}
-        @focus=${this.handleRippleFocus}
-        @blur=${this.handleRippleBlur}
         @mousedown=${this.handleRippleActivate}
         @mouseup=${this.handleRippleDeactivate}
         @mouseenter=${this.handleRippleMouseEnter}
@@ -289,16 +287,6 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
     this._rippleHandlers.endPress();
   }
 
-  @eventOptions({ passive: true })
-  private handleRippleFocus() {
-    this._rippleHandlers.startFocus();
-  }
-
-  @eventOptions({ passive: true })
-  private handleRippleBlur() {
-    this._rippleHandlers.endFocus();
-  }
-
   @eventOptions({ passive: true })
   private handleRippleMouseEnter() {
     this._rippleHandlers.startHover();
@@ -352,7 +340,18 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
           outline: none;
         }
 
-        :host(:focus-visible) ha-state-icon,
+        ha-card:focus-visible {
+          --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
+          --shadow-focus: 0 0 0 1px
+            var(--state-color, var(--paper-item-icon-color, #44739e));
+          border-color: var(
+            --state-color,
+            var(--paper-item-icon-color, #44739e)
+          );
+          box-shadow: var(--shadow-default), var(--shadow-focus);
+        }
+
+        ha-card:focus-visible ha-state-icon,
         :host(:active) ha-state-icon {
           transform: scale(1.2);
         }