Change buttons hover

src/hbs/partials/components/button.hbs

@@ -2,7 +2,7 @@
   class="button {{ class }}"
 >
   <div
-    class="button__wrapper js-parallax"
+    class="button__wrapper js-parallax {{ternary blackBgHover "button__wrapper--black" ""}}"
     data-rellax-speed="{{ternary rellax-speed rellax-speed 0}}"
     style="{{#if backgroundColor }} background-color: {{ backgroundColor }}; {{/if}}"
   >
@@ -11,6 +11,6 @@
         {{icon}}
       </div>
     {{/if}}
-    {{label}}
+    <span class="button__text">{{label}}</span>
   </div>
 </{{#if href}}a{{else}}button{{/if}}>

src/hbs/partials/components/project.hbs

@@ -19,6 +19,7 @@
         {{> components/button
           class="project__button"
           backgroundColor="#ff5301"
+          blackBgHover="true"
           label=project.button.label
           href=project.button.href
           rellax-speed="0.8"

src/styles/components/_button.scss

@@ -5,25 +5,48 @@ $_button_transition: all .25s ease-in-out;
   font-family: 'Work Sans';
   font-size: 14px;
   font-weight: 600;
-  color: $color-white;
   text-transform: uppercase;
   transition: $_button_transition;
 
-  &:hover {
-    color: $color-scarlet;
+  &:hover &__wrapper {
+    &::before {
+      transform: scaleX(1);
+    }
   }
 
-  &:hover &__icon {
-    transform: scale(1);
+  &__text {
+    position: relative;
   }
 
   &__wrapper {
+    position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     padding: 16px;
+    color: $color-white;
     border: 2px solid currentColor;
+
+    &--black {
+      &::before {
+        background: $color-black !important;
+      }
+    }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      background: $color-orange;
+      content: close-quote;
+      transform: scaleX(0);
+      transform-origin: left center;
+      transition: transform .5s $ease-out-quart;
+    }
   }
 
   &__icon {

src/styles/components/_project.scss

@@ -134,10 +134,6 @@
   &__button {
     margin: 10px 0;
 
-    &:hover {
-      color: $color-black !important;
-    }
-
     @media #{$screen-only-xs}, #{$screen-only-sm} {
       .js-parallax {
         @include disableTransform();

src/styles/components/_structure.scss

@@ -79,11 +79,6 @@
 
   &__button {
     margin-top: 10px;
-    color: $color-scarlet !important;
-
-    &:hover {
-      color: $color-blue !important;
-    }
 
     @media #{$screen-sm} {
       position: absolute;