Replace obsolete normalize with a lightweight reset.

assets/sass/components/button/_button.scss

@@ -14,60 +14,29 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
-  // stylelint-disable color-no-hex, color-named
   @extend %button--disabled;
   @include typeface(headings);
   @include margin-right(.75);
   @include margin-bottom(.75);
   // Some styles don't apply to <a> links since they are inline elements by default.
   display: inline-block;
-  padding: 2px 10px;
-  // Address Firefox 4+ setting `line-height` on `input` using `!important` in
-  // the UA stylesheet. And prevent its "line-height: normal" rule below from
-  // breaking the "appearance: button" styling on the input elements.
-  line-height: inherit;
+  padding: 4px 10px;
   text-decoration: none;
+  text-align: center;
   // Improve usability and consistency of cursor style between image-type `input` and others.
   cursor: pointer;
-  color: var(--color-button);
-  text-align: center;
-  background-image: linear-gradient(#f6f6f6, #e2e2e2);
-  border: 1px solid #e4e4e4;
-  border-left-color: #d2d2d2;
-  border-right-color: #d2d2d2;
-  border-bottom-color: #b4b4b4;
+  color: var(--color-button-text);
+  background-color: var(--color-button);
+  border: 0;
   border-radius: 2px;
 
-  // stylelint-disable property-no-vendor-prefix
-  // Correct the inability to style clickable types in iOS and Safari.
-  -moz-appearance: button;
-  -webkit-appearance: button;
-
-  // Remove the inner border and padding in Firefox.
-  &::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-  }
-
-  // Restore the focus styles unset by the previous rule.
-  &:-moz-focusring {
-    outline: 1px dotted ButtonText;
-  }
-  // sass-lint:enable property-no-vendor-prefix
-
   &:hover,
   &:focus,
   &:active {
     // Override any link underlines and color changes.
     text-decoration: none;
     color: var(--color-button);
-  }
-
-  &:active {
-    border-color: #555;
-    text-shadow: var(--color-button 0 -1px 0)  0 -1px 0;
-    background: var(--color-grey-dark);
-    color: var(--color-text-bg);
+    background-color: var(--color-button-text);
   }
 }
 
@@ -78,11 +47,20 @@ button,
     @include type-layout(xs, 1);
     @include margin-right(.3);
     @include margin-bottom(.3);
-    padding: 0 6px;
+    padding: 2px 6px;
   }
 
-  &--variant-name {
-    // Add styles here.
+  &--outline {
+    color: var(--color-button);
+    background-color: var(--color-button-text);
+    border: 1px solid var(--color-button);
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--color-button-text);
+      background-color: var(--color-button);
+    }
   }
 }