diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css
index 32b758a1..53a54c85 100644
--- a/src/theme/css/chrome.css
+++ b/src/theme/css/chrome.css
@@ -215,30 +215,45 @@ pre > .buttons {
 
     color: var(--sidebar-fg);
     cursor: pointer;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0.1s linear, opacity 0.1s linear;
+}
+pre:hover > .buttons {
+    visibility: visible;
+    opacity: 1
 }
 pre > .buttons :hover {
     color: var(--sidebar-active);
+    border-color: var(--icons-hover);
+    background-color: var(--theme-hover);
 }
 pre > .buttons i {
     margin-left: 8px;
 }
 pre > .buttons button {
-    color: inherit;
-    background: transparent;
-    border: none;
     cursor: inherit;
-    margin: 0px;
-    padding: 0px 0.5rem;
+    margin: 0px 5px;
+    padding: 3px 5px;
     font-size: 14px;
+
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 4px;
+    border-color: var(--icons);
+    background-color: var(--theme-popup-bg);
+    transition: 100ms;
+    transition-property: color,border-color,background-color;
+    color: var(--icons);
 }
 @media (pointer: coarse) {
     pre > .buttons button {
         /* On mobile, make it easier to tap buttons. */
-        padding: 0 1rem;
+        padding: 0.3rem 1rem;
     }
 }
 code {
-    padding: 1.6rem 1rem;
+    padding: 1rem;
 }
 
 /* FIXME: ACE editors overlap their buttons because ACE does absolute