Desfault button refactor

app/styles/components/buttons.scss

@@ -1,80 +1,98 @@
-// Buttons components
-.trans-button {
-    @extend %large;
+.button,
+%button {
+    @extend %medium;
     @extend %title;
+    background: transparent;
+    border: 0;
+    color: $white;
+    display: inline-block;
+    padding: .4rem 2.5rem;
     text-transform: uppercase;
-    &:hover,
-    &.active {
-        color: $green-taiga;
-        transition: color .3s linear;
+    transition: all .3s linear;
+    vertical-align: middle;
+    &:hover {
+        color: $white;
+        transition: all .3s linear;
+    }
+    &.loading {
+        span {
+            animation: loading .5s linear;
+        }
+    }
+    span {
+        color: $white;
     }
     .icon {
+        color: $white;
         margin-right: .3rem;
     }
 }
 
-.button {
+.trans-button {
+    @extend %large;
+    @extend %title;
     @extend %button;
+    span,
+    .icon {
+        color: $blackish;
+        transition: color .2s linear;
+    }
+    &:hover,
+    &.active {
+        span,
+        .icon {
+            color: $green-taiga;
+        }
+    }
 }
 
-button {
-    @extend %button;
-}
 
 .submit-button {
     width: 100%;
 }
 
 .button-green {
+    @extend %button;
     background: $green-taiga;
-    border: 0;
-    color: $white;
-    vertical-align: middle;
     &:hover,
     &.active {
         background: $fresh-taiga;
     }
-    span {
-        color: $white;
-    }
 }
 
-.button-gray,
-a.button-gray {
+.button-gray {
+    @extend %button;
     background: $gray;
-    &:hover {
+    &:hover,
+    &.active {
         background: $fresh-taiga;
         color: $white;
     }
-    span {
-        color: $white;
-    }
 }
 
-a.button-blackish {
+.button-blackish {
+    @extend %button;
     background: $blackish;
     color: $whitish;
     &:hover {
         background: $blackish;
         color: $white;
     }
-    span {
-        color: $white;
-    }
 }
 
-a.button-red {
+.button-red {
+    @extend %button;
     background: $red-light;
     &:hover {
         background: $red;
         color: $white;
     }
-    span {
+    .icon {
         color: $white;
     }
 }
 
-a.button-block {
+.button-block {
     background: $white;
     color: $red;
     &:hover {
@@ -83,35 +101,29 @@ a.button-block {
     }
 }
 
-a.button-bulk {
+.button-bulk {
     @extend %button;
     background: $green-taiga;
-    font-size: 22px;
-    margin-left: 2px;
-    padding: .3rem .5rem;
-    vertical-align: middle;
+    padding: .35rem .5rem;
     .icon {
-        @extend %medium;
-        color: $white;
         margin-right: 0;
     }
     &:hover {
         background: $fresh-taiga;
-        transition: background .3s linear;
     }
 }
+
+
 .button-auth {
     @extend %button;
     background: $grayer;
-    vertical-align: middle;
-    .icon, img {
+    .icon,
+    img {
         @extend %large;
         color: $white;
         margin-right: .5rem;
-        vertical-align: text-bottom;
     }
     &:hover {
         background: $black;
-        transition: background .3s linear;
     }
 }

app/styles/dependencies/helpers.scss

@@ -61,31 +61,6 @@
     }
 }
 
-.loading-spinner {
-    @extend %loading-spinner;
-}
-
-%button {
-    @extend %medium;
-    @extend %title;
-    display: inline-block;
-    padding: 7px 40px 6px;
-    transition: background .3s linear;
-    text-transform: uppercase;
-    &:hover {
-        transition: background .3s linear;
-    }
-    &.loading {
-        span {
-            animation: loading .5s linear;
-            animation: spin 1s linear infinite;
-        }
-    }
-    .icon {
-        margin-right: .3rem;
-    }
-}
-
 // Background
 %triangled-bg {
     background: url('/images/bg.png') no-repeat center center;
@@ -105,3 +80,7 @@
     max-width: 1rem;
     transform-origin: 32 32;
 }
+
+.loading-spinner {
+    @extend %loading-spinner;
+}