diff --git a/examples/webpage/app.js b/examples/webpage/app.js
index 24337ec..defd4bd 100644
--- a/examples/webpage/app.js
+++ b/examples/webpage/app.js
@@ -171,9 +171,9 @@ async function copyChatId() {
     els.chatId.disabled = true;
   }
 
-  els.copyChatIdBtn.textContent = "Copied";
+  els.copyChatIdBtn.classList.add("copied");
   window.setTimeout(() => {
-    els.copyChatIdBtn.textContent = "Copy";
+    els.copyChatIdBtn.classList.remove("copied");
   }, 1200);
 }
 
diff --git a/examples/webpage/index.html b/examples/webpage/index.html
index 5364977..677f03a 100644
--- a/examples/webpage/index.html
+++ b/examples/webpage/index.html
@@ -43,7 +43,13 @@
                 title="Copy Chat ID"
                 aria-label="Copy Chat ID"
               >
-                Copy
+                <svg class="copy-icon copy-icon--default" viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden="true">
+                  <rect x="5" y="5" width="8" height="9" rx="1.5" stroke="currentColor" stroke-width="1.4"/>
+                  <path d="M3 11V3.5A1.5 1.5 0 0 1 4.5 2H11" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
+                </svg>
+                <svg class="copy-icon copy-icon--check" viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden="true">
+                  <path d="M3 8.5l3.5 3.5 6.5-7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
               </button>
             </div>
           </label>
diff --git a/examples/webpage/styles.css b/examples/webpage/styles.css
index b0312e6..11abd69 100644
--- a/examples/webpage/styles.css
+++ b/examples/webpage/styles.css
@@ -351,25 +351,42 @@ body {
 
 .chat-id-control__copy {
   flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
   border: 1px solid var(--border);
   border-left: 0;
   border-radius: 0 10px 10px 0;
   background: var(--bg-soft);
   color: var(--text-dim);
-  padding: 0 10px;
-  font: inherit;
-  font-size: 12px;
+  padding: 0;
   cursor: pointer;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
 }
 
 .chat-id-control__copy:disabled {
-  opacity: 0.55;
+  opacity: 0.45;
   cursor: not-allowed;
 }
 
 .chat-id-control__copy:not(:disabled):hover {
-  color: var(--text);
+  color: var(--accent-strong);
   border-color: var(--accent);
+  background: rgba(79, 140, 255, 0.08);
+}
+
+.chat-id-control__copy .copy-icon--check {
+  display: none;
+  color: var(--success);
+}
+
+.chat-id-control__copy.copied .copy-icon--default {
+  display: none;
+}
+
+.chat-id-control__copy.copied .copy-icon--check {
+  display: block;
 }
 
 .status {