css: Do not use "*" selector for color_animated_button styles.

Using "*" selector is inefficient as they require checking every
element because of the browser's bottom-up matching process.

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;
     }
 

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%);
         }
 

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>