diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss
index 1d7476ec1a37..6fd5584357af 100644
--- a/src/main/scss/components/_buttons.scss
+++ b/src/main/scss/components/_buttons.scss
@@ -81,9 +81,56 @@
   }
 }
 
+.jenkins-button--outline {
+  color: var(--color, var(--text-color-secondary)) !important;
+
+  --button-background--hover: color-mix(
+    in sRGB,
+    var(--color, var(--text-color-secondary)) 15%,
+    transparent
+  );
+  --button-background--active: color-mix(
+    in sRGB,
+    var(--color, var(--text-color-secondary)) 20%,
+    transparent
+  );
+  --button-box-shadow--focus: color-mix(
+    in sRGB,
+    var(--color, var(--text-color-secondary)) 10%,
+    transparent
+  );
+
+  &::before {
+    background: transparent;
+    border: 2px solid var(--color, var(--text-color-secondary));
+    opacity: 1 !important;
+  }
+
+  &:hover {
+    &::before {
+      background: var(--button-background--hover) !important;
+    }
+  }
+
+  &:active {
+    &::before {
+      background: var(--button-background--active) !important;
+    }
+  }
+}
+
+.jenkins-button[class*="color"] .jenkins-button--outline {
+  &::before {
+    --button-background: currentColor;
+
+    background: transparent !important;
+    opacity: 0.1;
+  }
+}
+
 // Support for custom colors
 // Modifier classes must include 'color' in name to work
-.jenkins-button[class*="color"] {
+.jenkins-button[class*="color"] :not(.jenkins-button--outline) {
   background: transparent;
   color: var(--color) !important;