diff --git a/apps/docs/components/button.mdx b/apps/docs/components/button.mdx
index 9a3db9cfe3..6ff7ebc45d 100644
--- a/apps/docs/components/button.mdx
+++ b/apps/docs/components/button.mdx
@@ -57,7 +57,12 @@ Add the component to your email template. Include styles where needed.
     return (
       <Button
         href="https://example.com"
-        style={{ color: "#61dafb", padding: "10px 20px" }}
+        style={{ 
+          color: "#101010", 
+          backgroundColor: "#eee", 
+          borderRadius: 6, 
+          padding: "10px 20px" 
+        }}
       >
         Click me
       </Button>
@@ -71,7 +76,12 @@ const Email = () => {
   return (
     <Button
       href="https://example.com"
-      style={{ color: "#61dafb", padding: "10px 20px" }}
+      style={{ 
+        color: "#101010", 
+        backgroundColor: "#eee", 
+        borderRadius: 6, 
+        padding: "10px 20px" 
+      }}
     >
       Click me
     </Button>