🔥 Add hover effect on buttons and links

src/style/_base.scss

@@ -80,6 +80,7 @@ button {
 }
 .text-split {
     span, &__line {
+        display: inline-block;
         transition: opacity 0.7s var(--ease-quart), transform 0.7s var(--ease-quart);
     }
 }

src/style/_effects.scss

@@ -1,6 +1,6 @@
-/**
- * Box shadows
- */
+/*
+** Box shadows
+*/
 // Box: Dark
 .shadow-box-dark {
     box-shadow:
@@ -36,4 +36,46 @@
         0 2px 2px $shadow-color,
         0 4px 4px $shadow-color,
         0 16px 16px $shadow-color;
+}
+
+
+
+/*
+** Hovers
+*/
+// 3D effect link
+.link-3d {
+    overflow: hidden;
+
+    .text-split {
+        perspective: 300px;
+    }
+    .text-split__line {
+        --offset-y: 100%;
+        transform-origin: bottom center;
+
+        &:last-child {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            color: $color-secondary;
+            transform: translate3d(0, var(--offset-y), 0);
+            opacity: 0;
+        }
+    }
+    &:hover {
+        .text-split__line {
+            &:first-child {
+                opacity: 0;
+                transform: scale(0.92) translate3d(0, 12%, 0);
+            }
+            &:last-child {
+                opacity: 1;
+                transform: translate3d(0,0,0);
+                transition-delay: 55ms;
+            }
+        }
+    }
 }

src/style/atoms/_button.scss

@@ -9,6 +9,7 @@
     border-radius: 100vh;
     border: none;
     text-decoration: none;
+    transition: background-color 0.55s var(--ease-quart), color 0.55s var(--ease-quart);
 
     @include bp (sm) {
         height: 48px;
@@ -22,6 +23,17 @@
         margin-right: 12px;
     }
 
+    // Hover effect
+    &:hover {
+        background: $color-secondary;
+    }
+    .text-split__line {
+        &:last-child {
+            --offset-y: 65%;
+            color: #fff;
+        }
+    }
+
 
     /*
     ** Size variants
@@ -56,15 +68,36 @@
     */
     // Pink
     &--pink {
+        color: $color-text;
         background: $color-secondary-light;
+
+        // Hover
+        &:hover {
+            color: #fff;
+            background: $color-secondary;
+        }
+        .text-split__line {
+            &:last-child {
+                color: #fff;
+            }
+        }
     }
+
+    // Beige
     &--beige {
         $color-button: #F2D3B8;
+        color: $color-text;
         background: $color-button;
 
         &[disabled] {
             background: none;
             border: 2px solid darken($color-button, 2);
         }
+
+        // Hover
+        &:hover {
+            color: $color-primary-tertiary20;
+            background: darken($color-button, 2.5);
+        }
     }
 }

src/style/organisms/_footer.scss

@@ -56,7 +56,6 @@
         li {
             display: block;
             margin-bottom: 16px;
-            overflow: hidden;
 
             @include bp (sm) {
                 margin: 0 12px;
@@ -82,34 +81,6 @@
             @include bp (md) {
                 font-size: rem(16px);
             }
-
-            // Hover effect
-            .text-split__line {
-                &:last-child {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    color: $color-secondary;
-                    transform: translate3d(0, 100%, 0);
-                    opacity: 0;
-                    transition-delay: calc(var(--i-w) * 100ms);
-                }
-            }
-            &:hover {
-                .text-split__line {
-                    &:first-child {
-                        opacity: 0;
-                        transform: translate3d(0, -25%, 0);
-                        transition-duration: 0.5s;
-                    }
-                    &:last-child {
-                        opacity: 1;
-                        transform: translate3d(0, 0, 0);
-                    }
-                }
-            }
         }
         svg {
             margin-right: 8px;

src/style/pages/_homepage.scss

@@ -31,8 +31,31 @@
 
         // Button
         .button {
-            box-shadow: 0 1px 1px rgba($color-shadow-brown, 0.05), 0 2px 2px rgba($color-shadow-brown, 0.05), 0 4px 4px rgba($color-shadow-brown, 0.05), 0 16px 16px rgba($color-shadow-brown, 0.05);
+            $color-shadow: rgba($color-shadow-brown, 0.05);
+            box-shadow:
+                0 1px 1px $color-shadow,
+                0 2px 2px $color-shadow,
+                0 4px 4px $color-shadow,
+                0 16px 16px $color-shadow;
             margin-bottom: 40px;
+
+            svg {
+                transition: fill 0.3s;
+            }
+            .text-split__line {
+                &:last-child {
+                    color: #fff;
+                }
+            }
+
+            // Hover
+            &:hover {
+                background-color: $color-primary-tertiary20;
+
+                svg {
+                    fill: $color-tertiary;
+                }
+            }
         }
     }
         // Text