diff --git a/CHANGELOG.md b/CHANGELOG.md
index cd947f1c8e4..2c3f16cb687 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 **Bug fixes**
 
 - Increased column width on `EuiTableHeaderCellCheckbox` to prevent `EuiCheckbox`'s focus ring from getting clipped in `EuiBasicTable` ([#2770](https://github.com/elastic/eui/pull/2770))
+- Fixed the display of `EuiButton` within `EuiControlBar` when `fill={true}` to be more consistent with other buttons ([#2781](https://github.com/elastic/eui/pull/2781))
 
 **Deprecations**
 
diff --git a/src-docs/src/views/control_bar/tabs.js b/src-docs/src/views/control_bar/tabs.js
index 5ed0dfb8869..e3d83078e7c 100644
--- a/src-docs/src/views/control_bar/tabs.js
+++ b/src-docs/src/views/control_bar/tabs.js
@@ -72,6 +72,7 @@ export class ControlBarWithTabs extends React.Component {
         controlType: 'button',
         id: 'close_the_hatch',
         label: 'Close the Hatch',
+        fill: true,
         onClick: this.closeTheHatch,
         className: 'customClassName',
         color: 'primary',
diff --git a/src/components/control_bar/_control_bar.scss b/src/components/control_bar/_control_bar.scss
index 16fdfb4655d..4f307e9dcc5 100644
--- a/src/components/control_bar/_control_bar.scss
+++ b/src/components/control_bar/_control_bar.scss
@@ -167,9 +167,12 @@
     }
 
     .euiControlBar__button.euiButton--#{$colorName}:enabled {
+      box-shadow: none;
+    }
+
+    .euiControlBar__button.euiButton--#{$colorName}:enabled:not(.euiButton--fill) {
       color: makeHighContrastColor($colorValue, $euiControlBarBackground);
       border-color: makeHighContrastColor($colorValue, $euiControlBarBackground);
-      box-shadow: none;
     }
 
     .euiButtonIcon--#{$colorName} {