diff --git a/src/resources/state-control-styles.ts b/src/resources/state-control-styles.ts
new file mode 100644
index 0000000000..528dc45fc8
--- /dev/null
+++ b/src/resources/state-control-styles.ts
@@ -0,0 +1,67 @@
+import { css } from "lit";
+
+/**
+ * Shared styles for state control toggle components
+ * Used by: cover, valve, lock, fan, light toggle controls
+ */
+export const stateControlToggleStyle = css`
+  ha-control-switch {
+    height: 45vh;
+    max-height: 320px;
+    min-height: 200px;
+    --control-switch-thickness: 130px;
+    --control-switch-border-radius: var(--ha-border-radius-6xl);
+    --control-switch-padding: 6px;
+    --mdc-icon-size: 24px;
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: column;
+    width: 130px;
+    height: 45vh;
+    max-height: 320px;
+    min-height: 200px;
+    padding: 6px;
+    box-sizing: border-box;
+  }
+
+  ha-control-button {
+    flex: 1;
+    width: 100%;
+    --control-button-border-radius: var(--ha-border-radius-6xl);
+    --mdc-icon-size: 24px;
+  }
+
+  ha-control-button.active {
+    --control-button-icon-color: white;
+    --control-button-background-color: var(--color);
+    --control-button-focus-color: var(--color);
+    --control-button-background-opacity: 1;
+  }
+
+  ha-control-button:not(:last-child) {
+    margin-bottom: 6px;
+  }
+`;
+
+/**
+ * Additional styles for components with pulse animation (like lock toggle)
+ */
+export const stateControlPulseStyle = css`
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .pulse {
+    animation: pulse 1s infinite;
+  }
+`;
diff --git a/src/state-control/cover/ha-state-control-cover-toggle.ts b/src/state-control/cover/ha-state-control-cover-toggle.ts
index 24b68c85d3..6b6ff617f2 100644
--- a/src/state-control/cover/ha-state-control-cover-toggle.ts
+++ b/src/state-control/cover/ha-state-control-cover-toggle.ts
@@ -1,6 +1,6 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -10,6 +10,7 @@ import "../../components/ha-control-switch";
 import "../../components/ha-state-icon";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
+import { stateControlToggleStyle } from "../../resources/state-control-styles";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-state-control-cover-toggle")
@@ -137,41 +138,7 @@ export class HaStateControlCoverToggle extends LitElement {
     `;
   }
 
-  static styles = css`
-    ha-control-switch {
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      --control-switch-thickness: 130px;
-      --control-switch-border-radius: var(--ha-border-radius-6xl);
-      --control-switch-padding: 6px;
-      --mdc-icon-size: 24px;
-    }
-    .buttons {
-      display: flex;
-      flex-direction: column;
-      width: 130px;
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      padding: 6px;
-      box-sizing: border-box;
-    }
-    ha-control-button {
-      flex: 1;
-      width: 100%;
-      --control-button-border-radius: var(--ha-border-radius-6xl);
-      --mdc-icon-size: 24px;
-    }
-    ha-control-button.active {
-      --control-button-icon-color: white;
-      --control-button-background-color: var(--color);
-      --control-button-background-opacity: 1;
-    }
-    ha-control-button:not(:last-child) {
-      margin-bottom: 6px;
-    }
-  `;
+  static styles = [stateControlToggleStyle];
 }
 
 declare global {
diff --git a/src/state-control/ha-state-control-toggle.ts b/src/state-control/ha-state-control-toggle.ts
index 1ddaef948b..367143d54c 100644
--- a/src/state-control/ha-state-control-toggle.ts
+++ b/src/state-control/ha-state-control-toggle.ts
@@ -1,7 +1,7 @@
 import { mdiFlash, mdiFlashOff } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
-import { LitElement, css, html } from "lit";
+import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -12,6 +12,7 @@ import "../components/ha-control-button";
 import "../components/ha-control-switch";
 import { UNAVAILABLE, UNKNOWN } from "../data/entity";
 import { forwardHaptic } from "../data/haptics";
+import { stateControlToggleStyle } from "../resources/state-control-styles";
 import type { HomeAssistant } from "../types";
 
 @customElement("ha-state-control-toggle")
@@ -128,42 +129,7 @@ export class HaStateControlToggle extends LitElement {
     `;
   }
 
-  static styles = css`
-    ha-control-switch {
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      --control-switch-thickness: 130px;
-      --control-switch-border-radius: var(--ha-border-radius-6xl);
-      --control-switch-padding: 6px;
-      --mdc-icon-size: 24px;
-    }
-    .buttons {
-      display: flex;
-      flex-direction: column;
-      width: 130px;
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      padding: 6px;
-      box-sizing: border-box;
-    }
-    ha-control-button {
-      flex: 1;
-      width: 100%;
-      --control-button-border-radius: var(--ha-border-radius-6xl);
-      --mdc-icon-size: 24px;
-    }
-    ha-control-button.active {
-      --control-button-icon-color: white;
-      --control-button-background-color: var(--color);
-      --control-button-focus-color: var(--color);
-      --control-button-background-opacity: 1;
-    }
-    ha-control-button:not(:last-child) {
-      margin-bottom: 6px;
-    }
-  `;
+  static styles = [stateControlToggleStyle];
 }
 
 declare global {
diff --git a/src/state-control/lock/ha-state-control-lock-toggle.ts b/src/state-control/lock/ha-state-control-lock-toggle.ts
index bb4f4c949a..9c6d0c9f19 100644
--- a/src/state-control/lock/ha-state-control-lock-toggle.ts
+++ b/src/state-control/lock/ha-state-control-lock-toggle.ts
@@ -1,5 +1,5 @@
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -12,6 +12,10 @@ import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
 import type { LockEntity } from "../../data/lock";
 import { callProtectedLockService } from "../../data/lock";
+import {
+  stateControlToggleStyle,
+  stateControlPulseStyle,
+} from "../../resources/state-control-styles";
 import type { HomeAssistant } from "../../types";
 
 declare global {
@@ -145,56 +149,7 @@ export class HaStateControlLockToggle extends LitElement {
     `;
   }
 
-  static styles = css`
-    @keyframes pulse {
-      0% {
-        opacity: 1;
-      }
-      50% {
-        opacity: 0;
-      }
-      100% {
-        opacity: 1;
-      }
-    }
-    ha-control-switch {
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      --control-switch-thickness: 130px;
-      --control-switch-border-radius: var(--ha-border-radius-6xl);
-      --control-switch-padding: 6px;
-      --mdc-icon-size: 24px;
-    }
-    .pulse {
-      animation: pulse 1s infinite;
-    }
-    .buttons {
-      display: flex;
-      flex-direction: column;
-      width: 130px;
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      padding: 6px;
-      box-sizing: border-box;
-    }
-    ha-control-button {
-      flex: 1;
-      width: 100%;
-      --control-button-border-radius: var(--ha-border-radius-6xl);
-      --mdc-icon-size: 24px;
-    }
-    ha-control-button.active {
-      --control-button-icon-color: white;
-      --control-button-background-color: var(--color);
-      --control-button-focus-color: var(--color);
-      --control-button-background-opacity: 1;
-    }
-    ha-control-button:not(:last-child) {
-      margin-bottom: 6px;
-    }
-  `;
+  static styles = [stateControlToggleStyle, stateControlPulseStyle];
 }
 
 declare global {
diff --git a/src/state-control/valve/ha-state-control-valve-toggle.ts b/src/state-control/valve/ha-state-control-valve-toggle.ts
index bdc2d750af..4bd6717ce3 100644
--- a/src/state-control/valve/ha-state-control-valve-toggle.ts
+++ b/src/state-control/valve/ha-state-control-valve-toggle.ts
@@ -1,6 +1,6 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -10,6 +10,7 @@ import "../../components/ha-control-switch";
 import "../../components/ha-state-icon";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
+import { stateControlToggleStyle } from "../../resources/state-control-styles";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-state-control-valve-toggle")
@@ -137,42 +138,7 @@ export class HaStateControlValveToggle extends LitElement {
     `;
   }
 
-  static styles = css`
-    ha-control-switch {
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      --control-switch-thickness: 130px;
-      --control-switch-border-radius: var(--ha-border-radius-6xl);
-      --control-switch-padding: 6px;
-      --mdc-icon-size: 24px;
-    }
-    .buttons {
-      display: flex;
-      flex-direction: column;
-      width: 130px;
-      height: 45vh;
-      max-height: 320px;
-      min-height: 200px;
-      padding: 6px;
-      box-sizing: border-box;
-    }
-    ha-control-button {
-      flex: 1;
-      width: 100%;
-      --control-button-border-radius: var(--ha-border-radius-6xl);
-      --mdc-icon-size: 24px;
-    }
-    ha-control-button.active {
-      --control-button-icon-color: white;
-      --control-button-background-color: var(--color);
-      --control-button-focus-color: var(--color);
-      --control-button-background-opacity: 1;
-    }
-    ha-control-button:not(:last-child) {
-      margin-bottom: 6px;
-    }
-  `;
+  static styles = [stateControlToggleStyle];
 }
 
 declare global {