🔥 Add hover effect on buttons and links

2021-10-19 16:10:22 +02:00
parent ab9b0e1a59
commit ea567693c2
7 changed files with 111 additions and 37 deletions
--- a/src/style/pages/_homepage.scss
+++ b/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