diff --git a/packages/webawesome/docs/_utils/copy-code.js b/packages/webawesome/docs/_utils/copy-code.js
index 93f8ed526..c2268636f 100644
--- a/packages/webawesome/docs/_utils/copy-code.js
+++ b/packages/webawesome/docs/_utils/copy-code.js
@@ -33,7 +33,7 @@ export function copyCodePlugin(eleventyConfig, options = {}) {
 
       // Add a copy button
       pre.innerHTML += `<wa-button href="#${preId}" class="block-link-icon" appearance="plain" size="small"><wa-icon name="link" label="Copy link"></wa-icon></wa-button>
-        <wa-copy-button from="${codeId}" class="copy-button"></wa-copy-button>`;
+        <wa-copy-button from="${codeId}" class="copy-button wa-dark"></wa-copy-button>`;
     });
 
     return doc.toString();
diff --git a/packages/webawesome/docs/assets/styles/copy-code.css b/packages/webawesome/docs/assets/styles/copy-code.css
index 5d7bec575..bc5d36e35 100644
--- a/packages/webawesome/docs/assets/styles/copy-code.css
+++ b/packages/webawesome/docs/assets/styles/copy-code.css
@@ -25,6 +25,11 @@ wa-copy-button.copy-button {
   border-radius: var(--wa-border-radius-m);
   padding: 0.25rem;
 
+  &::part(button) {
+    background: transparent;
+    cursor: copy;
+  }
+
   @media (hover: hover) {
     &:hover {
       color: white;