diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 4341a77020..d4a2176b67 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -1330,6 +1330,36 @@ input.settings_text_input {
     }
 }
 
+.copy-btn {
+    display: flex;
+    border-radius: 4px;
+    color: var(--color-copy-btn);
+    /* 2px at 16px/1em */
+    padding: 0.125em;
+    cursor: pointer;
+
+    &:hover,
+    &:focus-visible {
+        color: var(--color-copy-btn-hover);
+    }
+
+    &:active {
+        color: var(--color-copy-btn-active);
+    }
+
+    &.copy-btn-square {
+        &:hover,
+        :focus-visible {
+            background-color: var(--color-copy-btn-square-bg-hover);
+        }
+
+        &:active {
+            background-color: var(--color-copy-btn-square-bg-active);
+            color: var(--color-copy-btn-square-active);
+        }
+    }
+}
+
 .text-success {
     color: hsl(120.91deg 32.04% 40.39%);
 }
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 965d927273..22adb46680 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -748,22 +748,24 @@
        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(--green-600);
-    /* hsl(144deg 84% 22%) corresponds to --green-600.
-       We use the hsl() equivalent directly since postcss-color-mix-function
-       cannot dynamically resolve var() arguments. */
-    --color-copy-btn-bg-hover: color-mix(
+    --color-copy-btn-hover: var(--grey-600);
+    /* --grey-600, opacity 0.07 */
+    --color-copy-btn-square-bg-hover: color-mix(
         in oklch,
-        hsl(144deg 84% 22%) 8%,
+        hsla(229deg 9% 36%) 7%,
         transparent
     );
-    --color-copy-btn-active: var(--green-500);
-    /* hsl(146deg 90% 27%) corresponds to --green-500.
-       We use the hsl() equivalent directly since postcss-color-mix-function
-       cannot dynamically resolve var() arguments. */
-    --color-copy-btn-bg-active: color-mix(
+    /* --grey-600, opacity 0.7 */
+    --color-copy-btn-active: color-mix(
         in oklch,
-        hsl(146deg 90% 27%) 12%,
+        hsla(229deg 9% 36%) 70%,
+        transparent
+    );
+    --color-copy-btn-square-active: var(--grey-600);
+    /* --grey-600, opacity 0.11 */
+    --color-copy-btn-square-bg-active: color-mix(
+        in oklch,
+        hsl(229deg 9% 36%) 11%,
         transparent
     );
 
@@ -1201,26 +1203,28 @@
         --color-left-sidebar-navigation-icon
     );
     --color-tab-picker-icon: hsl(0deg 0% 80%);
-    /* hsl(229deg 9% 65%) corresponds to --grey-350.
+    /* 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 9% 65%) 70%, transparent);
-    --color-copy-btn-hover: var(--green-300);
-    /* hsl(144deg 84% 22%) corresponds to --green-600.
-       We use the hsl() equivalent directly since postcss-color-mix-function
-       cannot dynamically resolve var() arguments. */
-    --color-copy-btn-bg-hover: color-mix(
+    --color-copy-btn: color-mix(in oklch, hsl(229deg 10% 70%) 70%, transparent);
+    --color-copy-btn-hover: var(--grey-300);
+    /* --grey-400, opacity 0.14 */
+    --color-copy-btn-square-bg-hover: color-mix(
         in oklch,
-        hsl(144deg 84% 22%) 8%,
+        hsl(230deg 9% 60%) 14%,
         transparent
     );
-    --color-copy-btn-active: var(--green-300);
-    /* hsl(139deg 54% 40%) corresponds to --green-400.
-       We use the hsl() equivalent directly since postcss-color-mix-function
-       cannot dynamically resolve var() arguments. */
-    --color-copy-btn-bg-active: color-mix(
+    /* --grey-300, opacity 0.7 */
+    --color-copy-btn-active: color-mix(
         in oklch,
-        hsl(139deg 54% 40%) 17%,
+        hsl(229deg 10% 70%) 70%,
+        transparent
+    );
+    --color-copy-btn-square-active: var(--grey-300);
+    /* --grey-400, opacity 0.18 */
+    --color-copy-btn-square-bg-active: color-mix(
+        in oklch,
+        hsl(229deg 9% 60%) 18%,
         transparent
     );
 
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index bcb39d7a7d..4077038bdf 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -1076,31 +1076,14 @@ ul.popover-group-menu-member-list {
 #popover-menu-copy-email,
 .copy-custom-profile-field-link {
     display: flex;
-    padding: 3px 2px 1px;
-    border-radius: 4px;
-    color: var(--color-text-item);
-    text-decoration: none !important;
     margin-left: auto;
 
     &.hide_copy_icon {
         display: none;
     }
 
-    &:hover {
-        color: var(--color-copy-btn-hover) !important;
-        background-color: var(--color-copy-btn-bg-hover);
-    }
-
-    &:active {
-        color: var(--color-copy-btn-active) !important;
-        background-color: var(--color-copy-btn-bg-active);
-    }
-
     &:focus-visible {
         outline: 1px solid var(--color-outline-focus) !important;
-        outline-offset: 0;
-        color: var(--color-copy-btn-hover) !important;
-        background-color: var(--color-copy-btn-bg-hover);
     }
 }
 
@@ -1296,7 +1279,7 @@ ul.popover-group-menu-member-list {
         height: 1.0667em;
     }
 
-    .zulip-icon {
+    .popover-menu-icon {
         position: relative;
         top: -1px;
     }
diff --git a/web/templates/popovers/user_card/user_card_popover.hbs b/web/templates/popovers/user_card/user_card_popover.hbs
index 569812927f..e97b4061c3 100644
--- a/web/templates/popovers/user_card/user_card_popover.hbs
+++ b/web/templates/popovers/user_card/user_card_popover.hbs
@@ -133,9 +133,9 @@
             {{#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>
-                    <a role="menuitem" tabindex="0" id="popover-menu-copy-email" class="popover-menu-link hide_copy_icon" aria-label="{{t 'Copy email'}}" data-tippy-content="{{t 'Copy email' }}" data-clipboard-text="{{ user_email }}">
-                        <i class="popover-menu-icon zulip-icon zulip-icon-copy hide" aria-hidden="true"></i>
-                    </a>
+                    <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 }}">
+                        <i class="zulip-icon zulip-icon-copy hide" aria-hidden="true"></i>
+                    </span>
                 </li>
             {{/if}}
         {{/if}}
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 4c4c592168..68f291b2e1 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,9 +4,9 @@
             <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>
-            <a role="menuitem" tabindex="0" class="popover-menu-link copy-custom-profile-field-link" aria-label="{{t 'Copy URL' }}" data-tippy-content="{{t 'Copy URL' }}">
-                <i class="popover-menu-icon zulip-icon zulip-icon-copy" aria-hidden="true"></i>
-            </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' }}">
+                <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
+            </span>
         {{else if this.is_external_account}}
             <a href="{{this.link}}" target="_blank" rel="noopener noreferrer" class="custom-profile-field-value custom-profile-field-link" data-tippy-content="{{this.name}}" tabindex="0">
                 {{#if (eq this.subtype "github") }}