style: add shine to donation button

remvze · Feb 7, 2024 · ac24da2 · ac24da2
1 parent 5916e86
commit ac24da2
Showing 1 changed file with 55 additions and 3 deletions.
diff --git a/src/components/categories/donate/donate.module.css b/src/components/categories/donate/donate.module.css
@@ -41,25 +41,77 @@
 
   .button {
     position: relative;
+    z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     width: max-content;
     height: 40px;
     padding: 0 20px;
     margin: 16px auto 0;
+    overflow: hidden;
     font-size: var(--font-xsm);
     font-weight: 500;
     color: var(--color-neutral-subtle);
     text-decoration: none;
     cursor: pointer;
-    background-color: var(--color-neutral-50);
-    border: 1px solid var(--color-neutral-200);
+    background-color: var(--color-neutral-200);
+    border: none;
     border-radius: 50px;
     transition: 0.2s;
 
-    &:hover {
+    &::after {
+      position: absolute;
+      top: 1px;
+      left: 1px;
+      z-index: -1;
+      width: calc(100% - 2px);
+      height: calc(100% - 2px);
+      content: '';
+      background-color: var(--color-neutral-50);
+      border-radius: 100px;
+      transition: inherit;
+    }
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: -2;
+      width: 150%;
+      aspect-ratio: 1 / 1;
+      content: '';
+      background-image: conic-gradient(
+        transparent,
+        transparent,
+        var(--color-neutral-500),
+        transparent,
+        transparent,
+        transparent,
+        transparent,
+        var(--color-neutral-500),
+        transparent,
+        transparent
+      );
+      transform: translate(-50%, -50%);
+      animation-name: shine;
+      animation-duration: 6s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+    }
+
+    &:hover::after {
       background-color: var(--color-neutral-100);
     }
   }
 }
+
+@keyframes shine {
+  0% {
+    transform: translate(-50%, -50%) rotate(90deg);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotate(450deg);
+  }
+}