diff --git a/web/src/copied_tooltip.ts b/web/src/copied_tooltip.ts
index 94ccb91fe7..97c1c7bd69 100644
--- a/web/src/copied_tooltip.ts
+++ b/web/src/copied_tooltip.ts
@@ -26,12 +26,12 @@ function show_copied_tooltip(
 }
 
 function show_check_icon(copy_button: HTMLElement): void {
-    $(copy_button).addClass("copy-btn-success");
+    $(copy_button).addClass("copy-button-success");
     $(copy_button).find(".zulip-icon").removeClass("zulip-icon-copy").addClass("zulip-icon-check");
 }
 
 function remove_check_icon(copy_button: HTMLElement): void {
-    $(copy_button).removeClass("copy-btn-success");
+    $(copy_button).removeClass("copy-button-success");
     $(copy_button).find(".zulip-icon").addClass("zulip-icon-copy").removeClass("zulip-icon-check");
 }
 
diff --git a/web/src/portico/help.ts b/web/src/portico/help.ts
index 57a0b70848..275c4c6e76 100644
--- a/web/src/portico/help.ts
+++ b/web/src/portico/help.ts
@@ -35,7 +35,7 @@ function register_tabbed_section($tabbed_section: JQuery): void {
 // Display the copy-to-clipboard button inside the .codehilite element
 // within the API and Help Center docs using clipboard.js
 function add_copy_to_clipboard_element($codehilite: JQuery): void {
-    const $copy_button = $("<span>").addClass("copy-btn copy-codeblock");
+    const $copy_button = $("<span>").addClass("copy-button copy-codeblock");
     $copy_button.html(zulip_copy_icon());
 
     $($codehilite).append($copy_button);
diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 587554b522..7b3aa9ee6c 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -1344,37 +1344,37 @@ input.settings_text_input {
     }
 }
 
-.copy-btn {
+.copy-button {
     display: flex;
     border-radius: 4px;
-    color: var(--color-copy-btn);
+    color: var(--color-copy-button);
     /* 2px at 16px/1em */
     padding: 0.125em;
     cursor: pointer;
 
     &:hover,
     &:focus-visible {
-        color: var(--color-copy-btn-hover);
+        color: var(--color-copy-button-hover);
     }
 
     &:active {
-        color: var(--color-copy-btn-active);
+        color: var(--color-copy-button-active);
     }
 
-    &.copy-btn-square {
+    &.copy-button-square {
         &:hover,
         :focus-visible {
-            background-color: var(--color-copy-btn-square-bg-hover);
+            background-color: var(--color-copy-button-square-bg-hover);
         }
 
         &:active {
-            background-color: var(--color-copy-btn-square-bg-active);
-            color: var(--color-copy-btn-square-active);
+            background-color: var(--color-copy-button-square-bg-active);
+            color: var(--color-copy-button-square-active);
         }
     }
 
-    &.copy-btn-success {
-        color: var(--color-copy-btn-success);
+    &.copy-button-success {
+        color: var(--color-copy-button-success);
     }
 }
 
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index a317829b29..078444c234 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -856,28 +856,32 @@
     /* hsl(229deg 9% 36%) corresponds to --grey-600.
        We use the hsl() equivalent directly since postcss-color-mix-function
        cannot dynamically resolve var() arguments. */
-    --color-copy-btn: color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent);
-    --color-copy-btn-hover: var(--grey-600);
+    --color-copy-button: color-mix(
+        in oklch,
+        hsl(229deg 9% 36%) 70%,
+        transparent
+    );
+    --color-copy-button-hover: var(--grey-600);
     /* --grey-600, opacity 0.07 */
-    --color-copy-btn-square-bg-hover: color-mix(
+    --color-copy-button-square-bg-hover: color-mix(
         in oklch,
         hsla(229deg 9% 36%) 7%,
         transparent
     );
     /* --grey-600, opacity 0.7 */
-    --color-copy-btn-active: color-mix(
+    --color-copy-button-active: color-mix(
         in oklch,
         hsla(229deg 9% 36%) 70%,
         transparent
     );
-    --color-copy-btn-square-active: var(--grey-600);
+    --color-copy-button-square-active: var(--grey-600);
     /* --grey-600, opacity 0.11 */
-    --color-copy-btn-square-bg-active: color-mix(
+    --color-copy-button-square-bg-active: color-mix(
         in oklch,
         hsl(229deg 9% 36%) 11%,
         transparent
     );
-    --color-copy-btn-success: var(--green-500);
+    --color-copy-button-success: var(--green-500);
 
     /* Reaction container colors */
     --color-message-reaction-border: hsl(0deg 0% 0% / 10%);
@@ -1403,28 +1407,32 @@
     /* hsl(229deg 10% 70%) corresponds to --grey-400.
        We use the hsl() equivalent directly since postcss-color-mix-function
        cannot dynamically resolve var() arguments. */
-    --color-copy-btn: color-mix(in oklch, hsl(229deg 10% 70%) 70%, transparent);
-    --color-copy-btn-hover: var(--grey-300);
+    --color-copy-button: color-mix(
+        in oklch,
+        hsl(229deg 10% 70%) 70%,
+        transparent
+    );
+    --color-copy-button-hover: var(--grey-300);
     /* --grey-400, opacity 0.14 */
-    --color-copy-btn-square-bg-hover: color-mix(
+    --color-copy-button-square-bg-hover: color-mix(
         in oklch,
         hsl(230deg 9% 60%) 14%,
         transparent
     );
     /* --grey-300, opacity 0.7 */
-    --color-copy-btn-active: color-mix(
+    --color-copy-button-active: color-mix(
         in oklch,
         hsl(229deg 10% 70%) 70%,
         transparent
     );
-    --color-copy-btn-square-active: var(--grey-300);
+    --color-copy-button-square-active: var(--grey-300);
     /* --grey-400, opacity 0.18 */
-    --color-copy-btn-square-bg-active: color-mix(
+    --color-copy-button-square-bg-active: color-mix(
         in oklch,
         hsl(229deg 9% 60%) 18%,
         transparent
     );
-    --color-copy-btn-success: var(--green-300);
+    --color-copy-button-success: var(--green-300);
 
     /* Reaction container colors */
     --color-message-reaction-border: hsl(0deg 0% 100% / 15%);
diff --git a/web/styles/portico/markdown.css b/web/styles/portico/markdown.css
index 183c03dfde..7a098bde15 100644
--- a/web/styles/portico/markdown.css
+++ b/web/styles/portico/markdown.css
@@ -1,13 +1,17 @@
 .markdown {
     /* Copied from app_variables.css to be used in portico pages. */
-    --color-copy-btn: color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent);
-    --color-copy-btn-hover: hsl(229deg 9% 36%);
-    --color-copy-btn-active: color-mix(
+    --color-copy-button: color-mix(
+        in oklch,
+        hsl(229deg 9% 36%) 70%,
+        transparent
+    );
+    --color-copy-button-hover: hsl(229deg 9% 36%);
+    --color-copy-button-active: color-mix(
         in oklch,
         hsla(229deg 9% 36%) 70%,
         transparent
     );
-    --color-copy-btn-success: hsl(146deg 90% 27%);
+    --color-copy-button-success: hsl(146deg 90% 27%);
 
     font-weight: 400;
     font-size: 1rem;
@@ -424,25 +428,25 @@
         }
     }
 
-    .copy-btn {
+    .copy-button {
         display: flex;
         border-radius: 4px;
-        color: var(--color-copy-btn);
+        color: var(--color-copy-button);
         /* 2px at 16px/1em */
         padding: 0.125em;
         cursor: pointer;
 
         &:hover,
         &:focus-visible {
-            color: var(--color-copy-btn-hover);
+            color: var(--color-copy-button-hover);
         }
 
         &:active {
-            color: var(--color-copy-btn-active);
+            color: var(--color-copy-button-active);
         }
 
-        &.copy-btn-success {
-            color: var(--color-copy-btn-success);
+        &.copy-button-success {
+            color: var(--color-copy-button-success);
         }
     }
 
diff --git a/web/styles/rendered_markdown.css b/web/styles/rendered_markdown.css
index 5e0781fc4e..7759423073 100644
--- a/web/styles/rendered_markdown.css
+++ b/web/styles/rendered_markdown.css
@@ -795,30 +795,30 @@
     }
 
     /* The properties of the code_external_link button are copied from the
-       copy-btn class in app_components.css. */
+       copy-button class in app_components.css. */
     .code_external_link {
         display: flex;
         border-radius: 4px;
-        color: var(--color-copy-btn);
+        color: var(--color-copy-button);
         /* 2px at 16px/1em */
         padding: 0.125em;
         cursor: pointer;
 
         &:hover,
         :focus-visible {
-            background-color: var(--color-copy-btn-square-bg-hover);
+            background-color: var(--color-copy-button-square-bg-hover);
         }
 
         &:active {
-            background-color: var(--color-copy-btn-square-bg-active);
-            color: var(--color-copy-btn-square-active);
+            background-color: var(--color-copy-button-square-bg-active);
+            color: var(--color-copy-button-square-active);
         }
     }
 
     .copy_codeblock,
     .code_external_link {
         font-size: 1.1363em;
-        border: 1px solid var(--color-copy-btn-square-bg-active);
+        border: 1px solid var(--color-copy-button-square-bg-active);
         backdrop-filter: blur(20px);
     }
 }
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index bd51c98dc7..c3fe3a0b7f 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -648,7 +648,7 @@ li,
     right: 5px;
     height: 1em;
     backdrop-filter: blur(20px);
-    outline: 1px solid var(--color-copy-btn-square-bg-active);
+    outline: 1px solid var(--color-copy-button-square-bg-active);
 }
 
 #copy_generated_link_container {
diff --git a/web/templates/about_zulip.hbs b/web/templates/about_zulip.hbs
index 236b333225..c4051e8248 100644
--- a/web/templates/about_zulip.hbs
+++ b/web/templates/about_zulip.hbs
@@ -9,14 +9,14 @@
                 <strong>Zulip Server</strong>
                 <div class="zulip-version-info">
                     <span>{{t "Version {zulip_version}" }}</span>
-                    <span class="copy-btn tippy-zulip-tooltip zulip-version" data-tippy-content="{{t 'Copy version' }}" data-tippy-placement="right" data-clipboard-text="{{zulip_version}}">
+                    <span class="copy-button tippy-zulip-tooltip zulip-version" data-tippy-content="{{t 'Copy version' }}" data-tippy-placement="right" data-clipboard-text="{{zulip_version}}">
                         <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
                     </span>
                 </div>
                 {{#if is_fork}}
                 <div class="zulip-merge-base-info">
                     <span>{{t "Forked from upstream at {zulip_merge_base}" }}</span>
-                    <span class="copy-btn tippy-zulip-tooltip zulip-merge-base" data-tippy-content="{{t 'Copy version' }}" data-tippy-placement="right" data-clipboard-text="{{zulip_merge_base}}">
+                    <span class="copy-button tippy-zulip-tooltip zulip-merge-base" data-tippy-content="{{t 'Copy version' }}" data-tippy-placement="right" data-clipboard-text="{{zulip_merge_base}}">
                         <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
                     </span>
                 </div>
diff --git a/web/templates/code_buttons_container.hbs b/web/templates/code_buttons_container.hbs
index d5ec1a7797..bfbd5ffc25 100644
--- a/web/templates/code_buttons_container.hbs
+++ b/web/templates/code_buttons_container.hbs
@@ -1,5 +1,5 @@
 <div class="code-buttons-container">
-    <span class="copy_codeblock copy-btn copy-btn-square" data-tippy-content="{{t 'Copy code' }}" aria-label="{{t 'Copy code' }}" role="button">
+    <span class="copy_codeblock copy-button copy-button-square" data-tippy-content="{{t 'Copy code' }}" aria-label="{{t 'Copy code' }}" role="button">
         <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
     </span>
     {{~#if show_playground_button~}}
diff --git a/web/templates/copy_invite_link.hbs b/web/templates/copy_invite_link.hbs
index 070bf80c23..328b2405ba 100644
--- a/web/templates/copy_invite_link.hbs
+++ b/web/templates/copy_invite_link.hbs
@@ -2,7 +2,7 @@
     <span>{{t "Link:" }}</span>
     <a href="{{ invite_link }}" id="multiuse_invite_link">{{ invite_link }}</a>
 
-    <span id="copy_generated_invite_link" class="copy-btn" data-tippy-content="{{t 'Copy link' }}" data-tippy-placement="top" aria-label="{{t 'Copy link' }}" data-clipboard-text="{{ invite_link }}" role="button">
+    <span id="copy_generated_invite_link" class="copy-button" data-tippy-content="{{t 'Copy link' }}" data-tippy-placement="top" aria-label="{{t 'Copy link' }}" data-clipboard-text="{{ invite_link }}" role="button">
         <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
     </span>
 </div>
diff --git a/web/templates/message_edit_form.hbs b/web/templates/message_edit_form.hbs
index 931478ae1f..da0333338d 100644
--- a/web/templates/message_edit_form.hbs
+++ b/web/templates/message_edit_form.hbs
@@ -5,7 +5,7 @@
             <div class="edit_form_banners"></div>
             <div class="edit-controls edit-content-container {{#if is_editable}}surround-formatting-buttons-row{{/if}}">
                 <div class="message-edit-textbox">
-                    <span class="copy_message copy-btn copy-btn-square tippy-zulip-tooltip" data-tippy-content="{{t 'Copy and close' }}" aria-label="{{t 'Copy and close' }}" role="button">
+                    <span class="copy_message copy-button copy-button-square tippy-zulip-tooltip" data-tippy-content="{{t 'Copy and close' }}" aria-label="{{t 'Copy and close' }}" role="button">
                         <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
                     </span>
                     <textarea class="message_edit_content" maxlength="{{ max_message_length }}">{{content}}</textarea>
diff --git a/web/templates/popovers/user_card/user_card_popover.hbs b/web/templates/popovers/user_card/user_card_popover.hbs
index e97b4061c3..5a6484d555 100644
--- a/web/templates/popovers/user_card/user_card_popover.hbs
+++ b/web/templates/popovers/user_card/user_card_popover.hbs
@@ -133,7 +133,7 @@
             {{#if user_email}}
                 <li role="none" class="popover-menu-list-item text-item user-card-popover-email-field hidden-for-spectators">
                     <span class="user_popover_email">{{ user_email }}</span>
-                    <span role="menuitem" tabindex="0" id="popover-menu-copy-email" class="popover-menu-link copy-btn hide_copy_icon" aria-label="{{t 'Copy email'}}" data-tippy-content="{{t 'Copy email' }}" data-clipboard-text="{{ user_email }}">
+                    <span role="menuitem" tabindex="0" id="popover-menu-copy-email" class="popover-menu-link copy-button hide_copy_icon" aria-label="{{t 'Copy email'}}" data-tippy-content="{{t 'Copy email' }}" data-clipboard-text="{{ user_email }}">
                         <i class="zulip-icon zulip-icon-copy hide" aria-hidden="true"></i>
                     </span>
                 </li>
diff --git a/web/templates/popovers/user_card/user_card_popover_custom_fields.hbs b/web/templates/popovers/user_card/user_card_popover_custom_fields.hbs
index 68f291b2e1..b26d539c12 100644
--- a/web/templates/popovers/user_card/user_card_popover_custom_fields.hbs
+++ b/web/templates/popovers/user_card/user_card_popover_custom_fields.hbs
@@ -4,7 +4,7 @@
             <a href="{{this.value}}" target="_blank" rel="noopener noreferrer" class="custom-profile-field-value custom-profile-field-link" data-tippy-content="{{this.name}}" tabindex="0">
                 <span class="custom-profile-field-text">{{this.value}}</span>
             </a>
-            <span role="menuitem" tabindex="0" class="popover-menu-link copy-btn copy-custom-profile-field-link" aria-label="{{t 'Copy URL' }}" data-tippy-content="{{t 'Copy URL' }}">
+            <span role="menuitem" tabindex="0" class="popover-menu-link copy-button copy-custom-profile-field-link" aria-label="{{t 'Copy URL' }}" data-tippy-content="{{t 'Copy URL' }}">
                 <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
             </span>
         {{else if this.is_external_account}}
diff --git a/web/templates/user_custom_profile_fields.hbs b/web/templates/user_custom_profile_fields.hbs
index 4ef1685d4c..cfac527b41 100644
--- a/web/templates/user_custom_profile_fields.hbs
+++ b/web/templates/user_custom_profile_fields.hbs
@@ -6,7 +6,7 @@
         {{#if this.is_link}}
             <div class="custom-user-url-field">
                 <a tabindex="0" href="{{this.value}}" target="_blank" rel="noopener noreferrer" class="value custom-profile-fields-link {{#if ../for_user_card_popover}}tippy-zulip-tooltip{{/if}}" data-tippy-content="{{this.name}}">{{this.value}}</a>
-                <span tabindex="0" class="copy-btn copy-custom-field-url tippy-zulip-tooltip" aria-label="{{t 'Copy URL' }}" data-tippy-content="{{t 'Copy URL' }}">
+                <span tabindex="0" class="copy-button copy-custom-field-url tippy-zulip-tooltip" aria-label="{{t 'Copy URL' }}" data-tippy-content="{{t 'Copy URL' }}">
                     <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
                 </span>
             </div>