🔥 Add hover effect on buttons and links

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;
+            }
+        }
+    }
 }