diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index 10d19495bd..b395163e86 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -100,19 +100,19 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
 
         <div id="controls">
           <div id="slider">
-            ${supportsFeature(stateObj, SUPPORT_BRIGHTNESS)
-              ? html`
-                  <round-slider
-                    min="0"
-                    .value=${brightness}
-                    @value-changing=${this._dragEvent}
-                    @value-changed=${this._setBrightness}
-                  ></round-slider>
-                `
-              : ""}
+            <round-slider
+              min="0"
+              .value=${brightness}
+              @value-changing=${this._dragEvent}
+              @value-changed=${this._setBrightness}
+              style=${styleMap({
+                visibility: supportsFeature(stateObj, SUPPORT_BRIGHTNESS)
+                  ? "visible"
+                  : "hidden",
+              })}
+            ></round-slider>
             <paper-icon-button
               class="light-button ${classMap({
-                "slider-center": supportsFeature(stateObj, SUPPORT_BRIGHTNESS),
                 "state-on": stateObj.state === "on",
                 "state-unavailable": stateObj.state === "unavailable",
               })}"
@@ -276,6 +276,13 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         color: var(--paper-item-icon-color, #44739e);
         width: 60%;
         height: auto;
+        position: absolute;
+        max-width: calc(100% - 40px);
+        box-sizing: border-box;
+        border-radius: 100%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
       }
 
       .light-button.state-on {
@@ -286,16 +293,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         color: var(--state-icon-unavailable-color);
       }
 
-      .slider-center {
-        position: absolute;
-        max-width: calc(100% - 40px);
-        box-sizing: border-box;
-        border-radius: 100%;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-
       #info {
         display: flex-vertical;
         justify-content: center;