chore: add a back to top component

1 files changed, 49 insertions, 0 deletions

diff --git a/src/components/molecules/buttons/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top.module.scss
new file mode 100644
index 0000000..1abf1f6
--- /dev/null
+++ b/src/components/molecules/buttons/back-to-top.module.scss
@@ -0,0 +1,49 @@
+@use "@styles/abstracts/functions" as fun;
+
+.wrapper {
+  a {
+    svg {
+      width: 100%;
+    }
+
+    :global {
+      .arrow-head {
+        transform: translateY(30%) scale(1.1);
+        transition: all 0.45s ease-in-out 0s;
+      }
+
+      .arrow-bar {
+        opacity: 0;
+        transform: translateY(30%) scaleY(0);
+        transition: transform 0.4s ease-in-out 0s, opacity 0.1s linear 0.4s;
+      }
+    }
+
+    &:hover,
+    &:focus {
+      :global {
+        .arrow-head {
+          transform: translateY(0) scale(1);
+        }
+
+        .arrow-bar {
+          opacity: 1;
+          transform: translateY(0) scaleY(1);
+          transition: transform 0.45s ease-in-out 0s;
+        }
+      }
+
+      svg {
+        :global {
+          animation: pulse 1.2s ease-in-out 0.6s infinite;
+        }
+      }
+    }
+
+    &:active {
+      svg {
+        animation-play-state: paused;
+      }
+    }
+  }
+}