🔥 Add hover effect on buttons and links

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