Animate Donate button

tomyo · Mar 25, 2024 · 40af7ea · 40af7ea
1 parent 761f8e4
commit 40af7ea
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/index.css b/index.css
@@ -112,6 +112,15 @@ main nav {
   filter: invert(1);
 }
 
+.info-donate {
+  display: flex;
+  gap: 0.5em;
+}
+
+#donate-button {
+  animation: glow 1s infinite alternate;
+}
+
 #tour-dates {
   min-width: max-content;
   filter: drop-shadow(0px 0px 1em var(--background-color));
@@ -189,3 +198,12 @@ tour-dates {
 tour-dates::part(button) {
   font-family: var(--font-family-primary);
 }
+
+@keyframes glow {
+  from {
+    box-shadow: 0 0 3px -3px #fefc9d;
+  }
+  to {
+    box-shadow: 0 0 3px 3px #fefc9d;
+  }
+}
diff --git a/index.html b/index.html
@@ -97,10 +97,11 @@ <h1 class="item">Cisco Pema</h1>
       </a>
     </div>
     <nav>
-      <div>
+      <div class="info-donate">
         <a href="#" class="button" id="press-info">+ Info</a>
         <a
           class="button"
+          id="donate-button"
           href="https://www.paypal.com/paypalme/ciscopema"
           target="_blank"
           >Donate</a