diff --git a/src-docs/src/views/button/button.js b/src-docs/src/views/button/button.js
index 2ff0e46c5b59..11c5cf43c212 100644
--- a/src-docs/src/views/button/button.js
+++ b/src-docs/src/views/button/button.js
@@ -148,6 +148,42 @@ export default () => (
       </EuiFlexItem>
     </EuiFlexGroup>
 
+    <EuiFlexGroup gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButton color="text" onClick={() => window.alert('Button clicked')}>
+          Text
+        </EuiButton>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          color="text"
+          fill
+          onClick={() => window.alert('Button clicked')}>
+          Filled
+        </EuiButton>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          color="text"
+          size="s"
+          onClick={() => window.alert('Button clicked')}>
+          Small
+        </EuiButton>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          color="text"
+          size="s"
+          fill
+          onClick={() => window.alert('Button clicked')}>
+          Small and filled
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+
     <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
         <EuiButton isDisabled onClick={() => window.alert('Button clicked')}>
diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
index e60e3d94cb8f..1eba4b993621 100644
--- a/src-docs/src/views/button/button_ghost.js
+++ b/src-docs/src/views/button/button_ghost.js
@@ -33,7 +33,7 @@ export default class extends Component {
           <EuiButton
             color="ghost"
             onClick={() => window.alert('Button clicked')}>
-            Primary
+            Ghost
           </EuiButton>
         </EuiFlexItem>
 
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 1d562b8b179d..6594d708d7f4 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -54,7 +54,7 @@
     }
 
     &.euiButton--fill {
-      color: $euiColorGhost;
+      color: lightOrDarkTheme($euiColorGhost, $euiColorLightShade);
       background-color: $euiButtonColorDisabled;
       border-color: $euiButtonColorDisabled;
 
@@ -85,7 +85,7 @@
       color: $euiTextColor;
     } @else {
       // Other colors need to check their contrast against the page background color.
-      color: makeHighContrastColor($color, $euiColorEmptyShade);
+      color: makeHighContrastColor($color, $euiPageBackgroundColor);
     }
 
     border-color: $color;
@@ -133,13 +133,31 @@
         }
       }
     }
+  }
+}
 
-    &:disabled,
-    &:disabled:hover,
-    &:disabled:focus {
-      @if ($name == 'ghost') {
-        @include euiSlightShadow($euiColorInk);
-      }
+// Fix ghost/disabled look specifically
+.euiButton:disabled.euiButton--ghost {
+  @include euiSlightShadow($euiColorInk);
+
+  &,
+  &:hover,
+  &:focus {
+    @include euiSlightShadow($euiColorInk);
+    color: $euiButtonColorGhostDisabled;
+    border-color: $euiButtonColorGhostDisabled;
+  }
+
+  .euiButton__spinner {
+    border-color: euiLoadingSpinnerBorderColors(transparentize($euiButtonColorGhostDisabled, .3));
+  }
+
+  &.euiButton--fill {
+    background-color: $euiButtonColorGhostDisabled;
+    color: $euiColorInk;
+
+    .euiButton__spinner {
+      border-color: euiLoadingSpinnerBorderColors(transparentize($euiColorInk, .3));
     }
   }
 }
diff --git a/src/global_styling/mixins/_button.scss b/src/global_styling/mixins/_button.scss
index 41593f841770..7164c541c75b 100644
--- a/src/global_styling/mixins/_button.scss
+++ b/src/global_styling/mixins/_button.scss
@@ -1,29 +1,22 @@
-@mixin euiButton {
-  @include euiFont;
-  @include euiFontSize;
-
+@mixin euiButtonBase {
   display: inline-block;
   appearance: none;
   cursor: pointer;
   height: $euiButtonHeight;
   line-height: $euiButtonHeight; // prevents descenders from getting cut off
-  text-decoration: none;
-  border: solid 1px transparent;
   text-align: center;
-  transition: all $euiAnimSpeedNormal $euiAnimSlightBounce;
   white-space: nowrap;
   max-width: 100%;
   vertical-align: middle;
+}
+
+@mixin euiButtonFocus {
+  transition: all $euiAnimSpeedNormal ease-in-out;
 
   &:hover:not(:disabled) {
     transform: translateY(-1px);
   }
 
-  &:hover:not(:disabled),
-  &:focus {
-    text-decoration: underline;
-  }
-
   &:focus {
     animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
   }
@@ -33,6 +26,24 @@
   }
 }
 
+@mixin euiButton {
+  @include euiButtonBase;
+  @include euiFont;
+  @include euiFontSize;
+
+  text-decoration: none;
+  border: solid 1px transparent;
+
+  // sass-lint:disable mixins-before-declarations
+  // focus states should come after all default styles
+  @include euiButtonFocus;
+
+  &:hover:not(:disabled),
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
 // 1. Apply margin to all but last item in the flex.
 // 2. Margin gets flipped because of the row-reverse.
 
diff --git a/src/global_styling/variables/_buttons.scss b/src/global_styling/variables/_buttons.scss
index 887a85cbc3e2..1ea2aeb86416 100644
--- a/src/global_styling/variables/_buttons.scss
+++ b/src/global_styling/variables/_buttons.scss
@@ -2,6 +2,7 @@ $euiButtonHeight: $euiSizeXXL !default;
 $euiButtonHeightSmall: $euiSizeXL !default;
 
 $euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 70%) !default;
+$euiButtonColorGhostDisabled: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade);
 $euiButtonToggleBorderColor: $euiColorLightShade !default;
 
 // Modifier naming and colors.
diff --git a/src/theme_amsterdam_dark.scss b/src/theme_amsterdam_dark.scss
index 47c18df4ea0a..96dbf4a80edb 100644
--- a/src/theme_amsterdam_dark.scss
+++ b/src/theme_amsterdam_dark.scss
@@ -9,3 +9,7 @@
 
 // Packages
 @import '../packages/index';
+
+// Component overrides
+// Comes after the component import and overrides via cascade
+@import 'themes/eui-amsterdam/overrides/index';
diff --git a/src/theme_amsterdam_light.scss b/src/theme_amsterdam_light.scss
index 48b987006b38..15f1bb055ce4 100644
--- a/src/theme_amsterdam_light.scss
+++ b/src/theme_amsterdam_light.scss
@@ -9,3 +9,7 @@
 
 // Packages
 @import '../packages/index';
+
+// Component overrides
+// Comes after the component import and overrides via cascade
+@import 'themes/eui-amsterdam/overrides/index';
diff --git a/src/themes/eui-amsterdam/global_styling/index.scss b/src/themes/eui-amsterdam/global_styling/index.scss
index 60ab65d5ba40..cb9a09de94d3 100644
--- a/src/themes/eui-amsterdam/global_styling/index.scss
+++ b/src/themes/eui-amsterdam/global_styling/index.scss
@@ -16,9 +16,3 @@
 
 // The reset file makes use of variables and mixins
 @import '../../../global_styling/reset/index';
-
-// TEMP OPVERRIDES FOR COMPONENT STYLES
-// THESE FILES SHOULD REPLACE COMPONENT
-// STYLES ONCE AMSTERDAM IS THE DEFAULT THEME
-
-@import 'overrides/index';
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss
index e6043e3eb3e4..b6a42fdd6d67 100644
--- a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss
+++ b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss
@@ -1,69 +1,18 @@
 @mixin euiButton {
+  @include euiButtonBase;
   @include euiFont;
   @include euiFontSize;
 
-  display: inline-block;
-  appearance: none;
-  cursor: pointer;
-  height: $euiButtonHeight;
-  line-height: $euiButtonHeight; // prevents descenders from getting cut off
+  font-weight: $euiFontWeightMedium;
   text-decoration: none;
-  border: none;
-  text-align: center;
   transition: all $euiAnimSpeedNormal $euiAnimSlightBounce;
-  white-space: nowrap;
-  max-width: 100%;
-  vertical-align: middle;
-  font-weight: $euiFontWeightMedium;
 
-  &:hover:not(:disabled) {
-    transform: translateY(-1px);
-  }
+  // sass-lint:disable mixins-before-declarations
+  // focus states should come after all default styles
+  @include euiButtonFocus;
 
   &:hover:not(:disabled),
   &:focus {
     text-decoration: underline;
   }
-
-  &:focus {
-    animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
-  }
-
-  &:active:not(:disabled) {
-    transform: translateY(1px);
-  }
-}
-
-// 1. Apply margin to all but last item in the flex.
-// 2. Margin gets flipped because of the row-reverse.
-
-@mixin euiButtonContent($isReverse: false) {
-  height: 100%;
-  width: 100%;
-  vertical-align: middle;
-
-  .euiButton__icon,
-  .euiButton__spinner {
-    flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size
-  }
-
-  @if ($isReverse) {
-    flex-direction: row-reverse;
-
-    > * + * {
-      margin-left: 0; // 1, 2
-      margin-right: $euiSizeS; // 1, 2
-    }
-  } @else {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    > * + * {
-      margin-left: $euiSizeS; // 1
-    }
-  }
 }
-
-// Keyframe animation declarations can be found in
-// utility/animations.scss
diff --git a/src/themes/eui-amsterdam/global_styling/overrides/_button.scss b/src/themes/eui-amsterdam/global_styling/overrides/_button.scss
deleted file mode 100644
index d7535637d44c..000000000000
--- a/src/themes/eui-amsterdam/global_styling/overrides/_button.scss
+++ /dev/null
@@ -1,133 +0,0 @@
-// THIS IS A TEMP FILE UNTIL AMSTERDAM IS THE DEFAULT THEME
-// THIS FILE SHOULD EVENTUALLY MOVE INTO components/button/_button.scss
-
-// This file has lots of modifiers and is somewhat nesty by nature
-//sass-lint:disable nesting-depth
-
-// Our base button
-.euiButton {
-  @include euiButton;
-  // sass-lint:disable no-important
-  box-shadow: none !important;
-  border-radius: $euiBorderRadius + 2;
-  min-width: $euiButtonMinWidth;
-
-  .euiButton__content {
-    @include euiButtonContent;
-
-    padding: 0 ($euiSize - $euiSizeXS);
-  }
-
-  .euiButton__text {
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  &.euiButton--small {
-    height: $euiButtonHeightSmall;
-    line-height: $euiButtonHeightSmall; // prevents descenders from getting cut off
-
-    &:not(.euiButtonToggle) {
-      border-radius: $euiBorderRadius;
-    }
-  }
-
-  &.euiButton--iconRight {
-    .euiButton__content {
-      @include euiButtonContent($isReverse: true);
-    }
-  }
-
-  &:enabled {
-    &:hover,
-    &:focus {
-      background-color: transparentize($euiColorPrimary, .9);
-    }
-  }
-
-  &:disabled {
-    color: $euiColorMediumShade;
-    background-color: transparentize($euiColorDarkShade, .9);
-    border-color: transparent;
-    pointer-events: none;
-
-    .euiButton__content {
-      pointer-events: auto;
-      cursor: not-allowed;
-    }
-
-    &.euiButton--fill {
-      color: $euiColorGhost;
-      background-color: $euiButtonColorDisabled;
-      border-color: $euiButtonColorDisabled;
-
-      &:hover,
-      &:focus {
-        background-color: $euiButtonColorDisabled;
-        border-color: $euiButtonColorDisabled;
-      }
-    }
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-    }
-  }
-}
-
-// Create button modifiers based upon the map.
-@each $name, $color in $euiButtonTypes {
-  .euiButton--#{$name} {
-    @if ($name == 'ghost') {
-      // Ghost is unique and ALWAYS sits against a dark background.
-      color: $color;
-    } @else if ($name == 'text') {
-      // The default color is lighter than the normal text color, make the it the text color
-      color: $euiTextColor;
-    } @else {
-      // Other colors need to check their contrast against the page background color.
-      color: darken($color, 10%);
-    }
-
-    background-color: transparentize($color, .8);
-
-    &.euiButton--fill {
-      // The function makes that hexes safe for theming
-      $fillTextColor: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
-
-      color: $fillTextColor;
-      background-color: $color;
-
-
-      &:enabled {
-        &:hover,
-        &:focus {
-          background-color: darken($color, 5%);
-          border-color: darken($color, 5%);
-        }
-      }
-
-      &:disabled .euiButton__spinner {
-        border-color: euiLoadingSpinnerBorderColors(transparentize($fillTextColor, .3));
-      }
-    }
-
-    &:enabled {
-
-      &:hover,
-      &:focus {
-
-        background-color: transparentize($color, .9);
-
-        @if ($name == 'disabled') {
-          cursor: not-allowed;
-        }
-      }
-    }
-  }
-}
-
-.euiButton--fullWidth {
-  display: block;
-  width: 100%;
-}
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss b/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss
index 804d7566f074..3d2f110f57f0 100644
--- a/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss
+++ b/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss
@@ -2,6 +2,7 @@ $euiButtonHeight: $euiSizeXXL !default;
 $euiButtonHeightSmall: $euiSizeXL !default;
 
 $euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 70%) !default;
+$euiButtonColorGhostDisabled: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade);
 $euiButtonToggleBorderColor: $euiColorLightShade !default;
 
 // Modifier naming and colors.
diff --git a/src/themes/eui-amsterdam/overrides/_button.scss b/src/themes/eui-amsterdam/overrides/_button.scss
new file mode 100644
index 000000000000..d121b4b59945
--- /dev/null
+++ b/src/themes/eui-amsterdam/overrides/_button.scss
@@ -0,0 +1,47 @@
+.euiButton {
+  // sass-lint:disable no-important
+  // remove for all states
+  box-shadow: none !important;
+
+  // I wouldn't alter the base radius here only.
+  // Instead, consider the greater goal and determine if you
+  // will be wanting to change the default radius for the whole theme
+  // border-radius: $euiBorderRadius + 2;
+
+  &:disabled {
+    // Make sure to continue to use the variables used for these specific purposes
+    // and just change the value of them, not the style
+    // color: $euiColorMediumShade;
+    background-color: transparentize($euiButtonColorDisabled, .9);
+  }
+}
+
+// Change the hollow (bordered) buttons to have a transparent background
+// and no border
+@each $name, $color in $euiButtonTypes {
+  .euiButton--#{$name} {
+    // This variable simulates the possibly darkest background the button could be on
+    // Simulates the 20% opaque color on top of the page background color
+    $backgroundColorSimulated: mix($euiPageBackgroundColor, $color, 80%);
+
+    @if ($name == 'ghost') {
+      // Ghost is unique and ALWAYS sits against a dark background.
+      $backgroundColorSimulated: mix($euiColorInk, $color, 70%);
+      color: makeHighContrastColor($color, $backgroundColorSimulated);
+    } @else {
+      // Then we can calculate the darkest text color needed
+      color: makeHighContrastColor($color, $backgroundColorSimulated);
+    }
+
+    // But still use transparency
+    background-color: transparentize($color, .8);
+
+    &:enabled {
+      &:hover,
+      &:focus {
+        // Makes the background lighter?
+        background-color: transparentize($color, .9);
+      }
+    }
+  }
+}
diff --git a/src/themes/eui-amsterdam/global_styling/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/overrides/_index.scss
rename to src/themes/eui-amsterdam/overrides/_index.scss