Merge pull request #630 from mbao01/button-hover-effect

Closes #452 - button hover effect transition
altair-graphql · Mar 13, 2019 · 8caa07c · 8caa07c
2 parents e1d8e5c + e428bfd
commit 8caa07c
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss
@@ -42,12 +42,26 @@ button{
     &.active-primary{
         background: var(--green-color);
         color: var(--white-color);
-        &:hover{
-            // TODO: Figure out how to transition CSS gradients for the button hover effect
+        position: relative;
+        z-index: 1;
+
+        &::before {
             background-image: linear-gradient(
                 rgba(255,255,255,0.2),
                 rgba(255,255,255,0.2)
             );
+            content: "";
+            height: 100%;
+            left: 0;
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            transition: opacity 0.4s;
+            width: 100%;
+            z-index: -1;
+        }
+        &:hover::before {
+            opacity: 1;
         }
     }
 }