diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 9e6e742364..c8a678fab3 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -719,7 +719,8 @@ div.overlay {
         transition: all 0.2s ease;
     }
 
-    * {
+    .zulip-icon,
+    .color-animated-button-text {
         padding: 6px 3px;
     }
 
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index ea05f7e2c2..38433fa6df 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -961,7 +961,8 @@
     .color_animated_button {
         background-color: hsl(211deg 29% 14%);
 
-        * {
+        .zulip-icon,
+        .color-animated-button-text {
             color: hsl(0deg 0% 100%);
         }
 
diff --git a/web/templates/login_to_view_image_button.hbs b/web/templates/login_to_view_image_button.hbs
index 7e92e06c8f..33ecef2ed9 100644
--- a/web/templates/login_to_view_image_button.hbs
+++ b/web/templates/login_to_view_image_button.hbs
@@ -1,6 +1,6 @@
 <div class="spectator_login_for_image_button">
     <a class="login_button color_animated_button" href="/login/">
         <i class='zulip-icon zulip-icon-log-in'></i>
-        <span>{{t "Log in to view image" }}</span>
+        <span class="color-animated-button-text">{{t "Log in to view image" }}</span>
     </a>
 </div>