Merge pull request #18 from wswidzinski/button-hover

Button hover

src/hbs/partials/components/button.hbs

@@ -4,14 +4,7 @@
   <div
     class="button__wrapper js-parallax"
     data-rellax-speed="{{ternary rellax-speed rellax-speed 0}}"
-    style="
-    {{#if outlineColor }}
-      color: {{ outlineColor }};
-    {{/if}}
-    {{#if backgroundColor }}
-      background-color: {{ backgroundColor }};
-    {{/if}}
-  "
+    style="{{#if backgroundColor }} background-color: {{ backgroundColor }}; {{/if}}"
   >
     {{#if icon}}
       <div class="button__icon">

src/hbs/partials/components/get-involved.hbs

@@ -16,7 +16,6 @@
           {{#each getInvolved.buttons as |button|}}
             {{> components/button
               class="get-involved__button"
-              outlineColor="#fff"
               label=button.label
               icon=(svg button.icon)
             }}

src/hbs/partials/components/hero.hbs

@@ -29,7 +29,6 @@
 
     {{> components/button
       label=hero.button.label
-      outlineColor="#FFF"
       class="hero__button"
       icon=(svg hero.button.icon width="24px" height="24px")
     }}

src/hbs/partials/components/introduction.hbs

@@ -33,7 +33,6 @@
       <div class="introduction__button">
         {{> components/button
           label=introduction.button.label
-          outlineColor="#fff"
           backgroundColor="#000"
           rellax-speed="0.5"
         }}

src/hbs/partials/components/structure.hbs

@@ -8,15 +8,13 @@
 
       <div class="structure__image"></div>
 
-      <div class="structure__button">
       {{> components/button
         label=structure.button.label
-          outlineColor="#ff3a00"
+        class="structure__button"
         backgroundColor="#000"
         icon=(svg structure.button.icon)
       }}
     </div>
-    </div>
 
     <div class="structure__details">
       <div class="text--small">

src/styles/components/_button.scss

@@ -1,10 +1,21 @@
+$_button_transition: all .25s ease-in-out;
+
 .button {
   width: 100%;
   font-family: 'Work Sans';
   font-size: 14px;
   font-weight: 600;
-  color: white;
+  color: $color-white;
   text-transform: uppercase;
+  transition: $_button_transition;
+
+  &:hover {
+    color: $color-scarlet;
+  }
+
+  &:hover &__icon {
+    transform: scale(1);
+  }
 
   &__wrapper {
     display: inline-flex;
@@ -17,6 +28,8 @@
 
   &__icon {
     margin-right: 10px;
+    transform: scale(.8);
+    transition: $_button_transition;
   }
 
   @media #{$screen-sm} {

src/styles/components/_project.scss

@@ -134,6 +134,10 @@
   &__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

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