diff --git a/src/components/base/button/button.scss b/src/components/base/button/button.scss
index d9e99385fd8ad09e87942072082ec0ec0cfd0d2b..c634683176ac901d6a6247a6e491a30ad83e3dfa 100644
--- a/src/components/base/button/button.scss
+++ b/src/components/base/button/button.scss
@@ -1,24 +1,10 @@
 /*
  * Button-specific utilities
  */
-@mixin gl-tmp-button-hover($color) {
-  box-shadow: inset 0 0 0 $gl-border-size-2 $color,
-    0 px-to-rem(2px) px-to-rem(2px) 0 rgba(0, 0, 0, 0.2);
-}
-
-@mixin gl-tmp-button-secondary-hover($color) {
-  box-shadow: inset 0 0 0 $gl-border-size-2 $color,
-    0 px-to-rem(2px) px-to-rem(2px) 0 rgba(0, 0, 0, 0.1);
-}
-
-@mixin gl-tmp-button-active($color) {
-  box-shadow: inset 0 0 0 $gl-border-size-2 $color,
-    inset 0 px-to-rem(2px) px-to-rem(4px) 0 rgba(0, 0, 0, 0.2);
-}
-
-@mixin gl-tmp-button-focus($color) {
-  box-shadow: inset 0 0 0 $gl-border-size-2 $color, 0 0 0 px-to-rem(1px) $blue-300,
-    0 0 px-to-rem(4px) px-to-rem(1px) $blue-300;
+@mixin gl-tmp-button-hover($border-color, $background-color) {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $border-color,
+    0 px-to-rem(2px) px-to-rem(2px) 0 rgba(0, 0, 0, 0.08);
+  background: $background-color;
 }
 
 .gl-button {
@@ -66,29 +52,29 @@
   }
 
   &:hover {
-    @include gl-bg-gray-50;
-    @include gl-tmp-button-secondary-hover($gray-200);
+    @include gl-tmp-button-hover($gray-300, $gray-50);
   }
 
   &:focus {
+    @include gl-focus($gl-border-size-2, $gray-300);
     @include gl-bg-gray-50;
-    @include gl-tmp-button-focus($gray-200);
   }
 
   &:active,
   &.active {
+    @include gl-focus($gl-border-size-2, $gray-400);
     @include gl-bg-gray-100;
-    @include gl-tmp-button-active($gray-300);
 
     &:focus {
-      @include gl-tmp-button-focus($gray-300);
+      @include gl-focus($gl-border-size-2, $gray-400);
     }
   }
 
   &.selected {
-    @include gl-bg-gray-50;
-    box-shadow: inset 0 0 0 px-to-rem(1px) $gray-400,
-      inset 0 px-to-rem(1px) px-to-rem(4px) px-to-rem(1px) rgba(0, 0, 0, 0.2);
+    @include gl-bg-gray-10;
+    box-shadow: inset 0 px-to-rem(2px) px-to-rem(4px) $gray-200, inset 0 px-to-rem(1px) 0 $gray-200,
+      inset px-to-rem(1px) 0 0 $gray-200, inset 0 px-to-rem(-1px) 0 $gray-200,
+      inset px-to-rem(-1px) 0 0 $gray-200;
   }
 
   &.btn-info:not(:disabled),
@@ -103,20 +89,21 @@
     @include gl-inset-border-1-blue-600;
 
     &:hover {
-      @include gl-tmp-button-hover($blue-700);
+      @include gl-tmp-button-hover($blue-800, $blue-600);
     }
 
     &:focus {
-      @include gl-tmp-button-focus($blue-700);
+      @include gl-focus($gl-border-size-2, $blue-800);
+      @include gl-bg-blue-600;
     }
 
     &:active,
     &.selected {
-      @include gl-bg-blue-600;
-      @include gl-tmp-button-active($blue-800);
+      @include gl-focus($gl-border-size-2, $blue-900);
+      @include gl-bg-blue-700;
 
       &:focus {
-        @include gl-tmp-button-focus($blue-800);
+        @include gl-focus($gl-border-size-2, $blue-900);
       }
     }
   }
@@ -128,25 +115,24 @@
     @include gl-inset-border-1-blue-500;
 
     &:hover {
-      @include gl-bg-blue-50;
       @include gl-text-blue-600;
-      @include gl-tmp-button-secondary-hover($blue-500);
+      @include gl-tmp-button-hover($blue-600, $blue-50);
     }
 
     &:focus {
-      @include gl-bg-blue-100;
       @include gl-text-blue-600;
-      @include gl-tmp-button-focus($blue-500);
+      @include gl-focus($gl-border-size-2, $blue-600);
+      @include gl-bg-blue-50;
     }
 
     &:active,
     &.selected {
-      @include gl-bg-blue-100;
       @include gl-text-blue-700;
-      @include gl-tmp-button-active($blue-600);
+      @include gl-focus($gl-border-size-2, $blue-700);
+      @include gl-bg-blue-100;
 
       &:focus {
-        @include gl-tmp-button-focus($blue-600);
+        @include gl-focus($gl-border-size-2, $blue-700);
       }
     }
   }
@@ -156,20 +142,21 @@
     @include gl-inset-border-1-green-600;
 
     &:hover {
-      @include gl-tmp-button-hover($green-700);
+      @include gl-tmp-button-hover($green-800, $green-600);
     }
 
     &:focus {
-      @include gl-tmp-button-focus($green-700);
+      @include gl-focus($gl-border-size-2, $green-800);
+      @include gl-bg-green-600;
     }
 
     &:active,
     &.selected {
-      @include gl-bg-green-600;
-      @include gl-tmp-button-active($green-800);
+      @include gl-focus($gl-border-size-2, $green-900);
+      @include gl-bg-green-700;
 
       &:focus {
-        @include gl-tmp-button-focus($green-800);
+        @include gl-focus($gl-border-size-2, $green-900);
       }
     }
   }
@@ -181,25 +168,24 @@
     @include gl-inset-border-1-green-500;
 
     &:hover {
-      @include gl-bg-green-50;
       @include gl-text-green-600;
-      @include gl-tmp-button-secondary-hover($green-500);
+      @include gl-tmp-button-hover($green-600, $green-50);
     }
 
     &:focus {
-      @include gl-bg-green-100;
-      @include gl-text-green-700;
-      @include gl-tmp-button-focus($green-500);
+      @include gl-text-green-600;
+      @include gl-focus($gl-border-size-2, $green-600);
+      @include gl-bg-green-50;
     }
 
     &:active,
     &.selected {
-      @include gl-bg-green-100;
       @include gl-text-green-700;
-      @include gl-tmp-button-active($green-600);
+      @include gl-focus($gl-border-size-2, $green-700);
+      @include gl-bg-green-100;
 
       &:focus {
-        @include gl-tmp-button-focus($green-600);
+        @include gl-focus($gl-border-size-2, $green-700);
       }
     }
   }
@@ -209,50 +195,50 @@
     @include gl-inset-border-1-orange-600;
 
     &:hover {
-      @include gl-tmp-button-hover($orange-700);
+      @include gl-tmp-button-hover($orange-800, $orange-600);
     }
 
     &:focus {
-      @include gl-tmp-button-focus($orange-700);
+      @include gl-focus($gl-border-size-2, $orange-800);
+      @include gl-bg-orange-600;
     }
 
     &:active,
     &.selected {
-      @include gl-bg-orange-600;
-      @include gl-tmp-button-active($orange-800);
+      @include gl-focus($gl-border-size-2, $orange-900);
+      @include gl-bg-orange-700;
 
       &:focus {
-        @include gl-tmp-button-focus($orange-800);
+        @include gl-focus($gl-border-size-2, $orange-900);
       }
     }
   }
 
   &.btn-warning.btn-secondary:not(:disabled) {
     @include gl-bg-white;
-    @include gl-text-orange-700;
+    @include gl-text-orange-500;
     @include gl-font-weight-normal;
     @include gl-inset-border-1-orange-500;
 
     &:hover {
-      @include gl-bg-orange-50;
       @include gl-text-orange-600;
-      @include gl-tmp-button-secondary-hover($orange-500);
+      @include gl-tmp-button-hover($orange-600, $orange-50);
     }
 
     &:focus {
-      @include gl-bg-orange-100;
-      @include gl-text-orange-800;
-      @include gl-tmp-button-focus($orange-500);
+      @include gl-text-orange-600;
+      @include gl-focus($gl-border-size-2, $orange-600);
+      @include gl-bg-orange-50;
     }
 
     &:active,
     &.selected {
-      @include gl-bg-orange-100;
       @include gl-text-orange-700;
-      @include gl-tmp-button-active($orange-600);
+      @include gl-focus($gl-border-size-2, $orange-700);
+      @include gl-bg-orange-100;
 
       &:focus {
-        @include gl-tmp-button-focus($orange-600);
+        @include gl-focus($gl-border-size-2, $orange-700);
       }
     }
   }
@@ -262,20 +248,21 @@
     @include gl-inset-border-1-red-600;
 
     &:hover {
-      @include gl-tmp-button-hover($red-700);
+      @include gl-tmp-button-hover($red-800, $red-600);
     }
 
     &:focus {
-      @include gl-tmp-button-focus($red-700);
+      @include gl-focus($gl-border-size-2, $red-800);
+      @include gl-bg-red-600;
     }
 
     &:active,
     &.selected {
-      @include gl-bg-red-600;
-      @include gl-tmp-button-active($red-800);
+      @include gl-focus($gl-border-size-2, $red-900);
+      @include gl-bg-red-700;
 
       &:focus {
-        @include gl-tmp-button-focus($red-800);
+        @include gl-focus($gl-border-size-2, $red-900);
       }
     }
   }
@@ -287,25 +274,24 @@
     @include gl-inset-border-1-red-500;
 
     &:hover {
-      @include gl-bg-red-100;
       @include gl-text-red-600;
-      @include gl-tmp-button-secondary-hover($red-500);
+      @include gl-tmp-button-hover($red-600, $red-50);
     }
 
     &:focus {
-      @include gl-bg-red-100;
       @include gl-text-red-600;
-      @include gl-tmp-button-focus($red-500);
+      @include gl-focus($gl-border-size-2, $red-600);
+      @include gl-bg-red-50;
     }
 
     &:active,
     &.selected {
-      @include gl-bg-red-200;
       @include gl-text-red-700;
-      @include gl-tmp-button-active($red-600);
+      @include gl-focus($gl-border-size-2, $red-700);
+      @include gl-bg-red-100;
 
       &:focus {
-        @include gl-tmp-button-focus($red-600);
+        @include gl-focus($gl-border-size-2, $red-700);
       }
     }
   }
@@ -329,15 +315,32 @@
   }
 
   &.btn-dashed {
-    @include gl-inset-border-1-gray-600;
-    outline: px-to-rem(2px) dashed $white;
+    @include gl-inset-border-1-gray-400;
+    outline: px-to-rem(1px) dashed $white;
     outline-offset: px-to-rem(-1px);
 
-    &:hover,
-    &:focus,
+    &:hover {
+      @include gl-bg-gray-50;
+    }
+
+    &:focus {
+      @include gl-focus($gl-border-size-1, $gray-400);
+      outline: px-to-rem(1px) dashed $gray-50;
+      outline-offset: px-to-rem(-1px);
+    }
+
     &:active,
-    &.selected {
-      outline: none;
+    &.active {
+      @include gl-focus($gl-border-size-1, $gray-500);
+      outline: px-to-rem(1px) dashed $gray-100;
+      outline-offset: px-to-rem(-1px);
+      @include gl-bg-gray-100;
+
+      &:focus {
+        @include gl-focus($gl-border-size-1, $gray-500);
+        outline: px-to-rem(1px) dashed $gray-100;
+        outline-offset: px-to-rem(-1px);
+      }
     }
   }
 
@@ -371,19 +374,46 @@
   &.btn-label:hover,
   &.btn-label:focus,
   &.btn-label:active {
-    @include gl-bg-gray-50;
+    @include gl-bg-gray-10;
     @include gl-text-gray-900;
     @include gl-fill-current-color;
-    @include gl-inset-border-1-gray-400;
+    @include gl-inset-border-1-gray-200;
     @include gl-cursor-default;
   }
 
   &.disabled,
   &[disabled] {
-    @include gl-bg-gray-50;
-    @include gl-text-gray-600;
-    @include gl-inset-border-1-gray-200;
+    @include gl-bg-gray-10;
+    @include gl-text-gray-400;
+    @include gl-inset-border-1-gray-100;
     @include gl-opacity-10;
     cursor: not-allowed !important;
   }
 }
+
+.btn-link {
+  @include gl-border-0;
+  @include gl-font-base;
+  @include gl-line-height-normal;
+  @include gl-text-blue-500;
+  @include gl-py-0;
+  @include gl-px-0;
+
+  &:hover {
+    @include gl-text-blue-500;
+  }
+
+  &:focus {
+    @include gl-focus(null, false);
+  }
+
+  &:active {
+    @include gl-focus(null, false);
+    @include gl-text-blue-700;
+    @include gl-text-decoration-underline;
+
+    &:focus {
+      @include gl-focus(null, false);
+    }
+  }
+}
diff --git a/src/components/base/pagination/pagination.scss b/src/components/base/pagination/pagination.scss
index 87ecc069b4576a7edfd52505d584dba73a97b2f9..0344a12df8ab14987264f50fca45bbd104c6b654 100644
--- a/src/components/base/pagination/pagination.scss
+++ b/src/components/base/pagination/pagination.scss
@@ -11,8 +11,7 @@
 
     &:not(.active):hover {
       @include gl-text-gray-900;
-      @include gl-bg-gray-100;
-      @include gl-tmp-button-secondary-hover($gray-400);
+      @include gl-tmp-button-hover($gray-400, $gray-50);
       @include gl-z-index-0;
     }
   }
diff --git a/src/scss/utility-mixins/spacing.scss b/src/scss/utility-mixins/spacing.scss
index e309df6dd42d5b101d6689452ef6d05f1f2b79aa..4128ca3c3d1035b4bc774200f1f3eb926fe9516e 100644
--- a/src/scss/utility-mixins/spacing.scss
+++ b/src/scss/utility-mixins/spacing.scss
@@ -37,6 +37,11 @@
   padding: $gl-spacing-scale-7;
 }
 
+@mixin gl-px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 @mixin gl-px-1 {
   padding-left: $gl-spacing-scale-1;
   padding-right: $gl-spacing-scale-1;
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-loading-button-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-loading-button-1-snap.png
index 454bd42292457b1b16ebdf63037a21f637c44ace..72e53ac9669d73293020e0b5668bf89380e0ed8a 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-loading-button-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-loading-button-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-defaults-to-top-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-defaults-to-top-1-snap.png
index c9116d79de7df1bef26f1733582a8d47f44031dd..0ebbce8629b499715cf1236459ad939fc6acd041 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-defaults-to-top-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-defaults-to-top-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-bottom-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-bottom-1-snap.png
index 3317d547d7b5307f21e01f39fb7883dc0ad4564f..cde46ae858bc755c5fd8d023d19cb069db7d63a5 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-bottom-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-bottom-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-left-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-left-1-snap.png
index 9833a746d5f85a8581871e0e77b17cf1e2d79830..778674f2c46cf8580768311ac474318aa89f4b58 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-left-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-left-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-right-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-right-1-snap.png
index 55d03025266042653430f7218b6c646cb6f1d5df..28cdb9165f9bd8a30f60333acedeaf86d1c65278 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-right-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-right-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-topleft-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-topleft-1-snap.png
index 45afda6310833847e9e724d9b33fc87214989c4b..1592afbe6b5d73c3f0de1cc7388c92653a60795d 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-topleft-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-topleft-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-topright-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-topright-1-snap.png
index 934514a17bc4bd798766ef0d3729cafa1987de61..78fdbf5f813348ec7415ceebdc17057ecaa84f76 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-topright-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tooltip-to-the-topright-1-snap.png differ