1 files changed, 26 insertions, 21 deletions

diff --git a/src/buttons.less b/src/buttons.less
index 88f87bf..3f1e326 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -9,24 +9,23 @@
   cursor: pointer;
   display: inline-block;
   font-size: @font-size;
-  height: 3.2rem;
-  line-height: 2rem;
+  height: @control-size;
+  line-height: @line-height;
   outline: none;
-  padding: .5rem .8rem;
+  padding: @control-padding-v @control-padding-h;
   text-align: center;
   text-decoration: none;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
   &:focus {
-    background: @secondary-color-light;
+    background: @secondary-color;
     .control-shadow();
     text-decoration: none;
   }
   &:hover {
-    background: @primary-color;
+    background: @secondary-color;
     border-color: @primary-color-dark;
-    color: @light-color;
     text-decoration: none;
   }
   &:active,
@@ -35,6 +34,12 @@
     border-color: darken(@primary-color-dark, 5%);
     color: @light-color;
     text-decoration: none;
+    &.loading {
+      &::after {
+        border-bottom-color: @light-color;
+        border-left-color: @light-color;
+      }
+    }
   }
   &[disabled],
   &:disabled,
@@ -85,14 +90,14 @@
   // Button Sizes
   &.btn-sm {
     font-size: @font-size-sm;
-    height: 2.4rem;
-    padding: .1rem .8rem;
+    height: @control-size-sm;
+    padding: @control-padding-v-sm @control-padding-h;
   }
 
   &.btn-lg {
     font-size: @font-size-lg;
-    height: 4rem;
-    padding: .9rem .8rem;
+    height: @control-size-lg;
+    padding: @control-padding-v-lg @control-padding-h;
   }
 
   // Button Block
@@ -103,16 +108,16 @@
 
   // Button Action
   &.btn-action {
-    width: 3.2rem;
+    width: @control-size;
     padding-left: 0;
     padding-right: 0;
 
     &.btn-sm {
-      width: 2.4rem;
+      width: @control-size-sm;
     }
 
     &.btn-lg {
-      width: 4rem;
+      width: @control-size-lg;
     }
   }
 
@@ -121,14 +126,14 @@
     background: transparent;
     border: 0;
     color: currentColor;
-    height: 1.6rem;
-    line-height: 1.6rem;
-    margin-left: .4rem;
-    margin-right: -.2rem;
+    height: @unit-4;
+    line-height: @unit-4;
+    margin-left: @unit-1;
+    margin-right: -2px;
     opacity: .45;
-    padding: 0 .2rem;
+    padding: 0 2px;
     text-decoration: none;
-    width: 1.6rem;
+    width: @unit-4;
 
     &:hover {
       opacity: .85;
@@ -153,12 +158,12 @@
     }
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
-      margin-left: -.1rem;
+      margin-left: -@border-width;
     }
     &:last-child:not(:first-child) {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
-      margin-left: -.1rem;
+      margin-left: -@border-width;
     }
     &:focus,
     &:hover,