button mixin

style/_header.scss

@@ -53,13 +53,12 @@ header {
         align-items: flex-end;
 
         button {
-            background: #ccc;
             padding: 3px 5px;
             text-transform: lowercase;
             font-size: 0.66em;
             line-height: 1em;
             margin: 2px 5px;
-            @include mixins.heading;
+            @include mixins.button;
         }
     }
 
@@ -70,19 +69,14 @@ header {
             width: 120px;
         }
         .adjust {
-            color: white;
-            font-family: "Proxima Nova";
-            font-weight: 900;
             margin: 0 1px;
             width: 20px;
-            text-align: center;
 
             &:hover {
-                transform: scale(1.4);
-                transition: transform .2s;
                 cursor: pointer;
             }
 
+            @include mixins.button;
         }
     }
 

style/_mixins.scss

@@ -5,3 +5,15 @@
 @mixin text {
     font-family: "Noto Serif";
 }
+
+@mixin button {
+    @include heading;
+    font-weight: 900;
+    background: crimson;
+    text-align: center;
+    color: white;
+    &:hover {
+        filter: hue-rotate(40deg);
+        transition: filter .2s;
+    }
+}