diff --git a/.changeset/fix-codeblock-button-overlap.md b/.changeset/fix-codeblock-button-overlap.md
new file mode 100644
index 000000000..1bb3a1259
--- /dev/null
+++ b/.changeset/fix-codeblock-button-overlap.md
@@ -0,0 +1,5 @@
+---
+"@clickhouse/click-ui": patch
+---
+
+CodeBlock action buttons (copy, wrap) are now hidden by default and revealed on hover or focus-within with a fade transition. Buttons display a semi-opaque background pill matching the code block theme to prevent overlap with code content.
diff --git a/src/components/CodeBlock/CodeBlock.tsx b/src/components/CodeBlock/CodeBlock.tsx
index d38edfa59..2e5df5afc 100644
--- a/src/components/CodeBlock/CodeBlock.tsx
+++ b/src/components/CodeBlock/CodeBlock.tsx
@@ -40,12 +40,37 @@ interface CustomRendererProps {
   useInlineStyles: boolean;
 }
 
+const ButtonContainer = styled.div<{ $theme?: CodeThemeType }>`
+  position: absolute;
+  display: flex;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+  ${({ theme, $theme }) => {
+    const themeName = ($theme ?? theme.name) as CodeThemeType;
+    const bg = theme.click.codeblock[`${themeName}Mode`].color.background.default;
+    return `
+      gap: 0.625rem;
+      border-radius: ${theme.click.codeblock.radii.all};
+      padding: ${theme.sizes[1]};
+      top: ${theme.click.codeblock.space.y};
+      right: ${theme.click.codeblock.space.x};
+      background: color-mix(in srgb, ${bg} 90%, transparent);
+    `;
+  }}
+`;
+
 const CodeBlockContainer = styled.div<{ $theme?: CodeThemeType }>`
   width: 100%;
   width: -webkit-fill-available;
   width: fill-available;
   width: stretch;
   position: relative;
+  &:hover ${ButtonContainer}, &:focus-within ${ButtonContainer} {
+    opacity: 1;
+  }
   ${({ theme, $theme }) => {
     const themeName = theme.name as CodeThemeType;
 
@@ -84,16 +109,6 @@ const CodeContent = styled.code`
   color: inherit;
 `;
 
-const ButtonContainer = styled.div`
-  position: absolute;
-  display: flex;
-  ${({ theme }) => `
-    gap:  0.625rem;
-    top: ${theme.click.codeblock.space.y};
-    right: ${theme.click.codeblock.space.x};
-  `}
-`;
-
 export const CodeBlock = ({
   children,
   language,
@@ -140,7 +155,7 @@ export const CodeBlock = ({
       $theme={theme}
       {...props}
     >
-      <ButtonContainer>
+      <ButtonContainer $theme={theme}>
         {showWrapButton && (
           <CodeButton
             as={IconButton}