From 21930d0893bf147fdeb1a30347a3a286dbda1dd0 Mon Sep 17 00:00:00 2001
From: Maciej Matuszewski <maciek.matuszewski@gmail.com>
Date: Tue, 16 Jan 2018 19:11:28 +0100
Subject: [PATCH] Change buttons hover

---
 src/hbs/partials/components/button.hbs  |  4 +--
 src/hbs/partials/components/project.hbs |  1 +
 src/styles/components/_button.scss      | 33 +++++++++++++++++++++----
 src/styles/components/_project.scss     |  4 ---
 src/styles/components/_structure.scss   |  5 ----
 5 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/hbs/partials/components/button.hbs b/src/hbs/partials/components/button.hbs
index 70806c2..92169bd 100644
--- a/src/hbs/partials/components/button.hbs
+++ b/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}}>
diff --git a/src/hbs/partials/components/project.hbs b/src/hbs/partials/components/project.hbs
index c59318f..0e20b6d 100644
--- a/src/hbs/partials/components/project.hbs
+++ b/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"
diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss
index 43153c7..25536d6 100644
--- a/src/styles/components/_button.scss
+++ b/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 {
diff --git a/src/styles/components/_project.scss b/src/styles/components/_project.scss
index 5c79bba..2b0d5b0 100644
--- a/src/styles/components/_project.scss
+++ b/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();
diff --git a/src/styles/components/_structure.scss b/src/styles/components/_structure.scss
index 2efd88c..89e5b79 100644
--- a/src/styles/components/_structure.scss
+++ b/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;