aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/buttons/back-to-top.module.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/buttons/back-to-top.module.scss')
-rw-r--r--src/components/molecules/buttons/back-to-top.module.scss49
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;
+ }
+ }
+ }
+}