From: Ardis Lu <ardisglu@gmail.com>
Date: Tue, 26 Mar 2024 06:09:02 +0000 (-0700)
Subject: Add flicker effect to hidden button
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=e2b713175d7922ce85308ba38903afee5b318909;p=ard.is

Add flicker effect to hidden button
---

diff --git a/index.html b/index.html
index 3be59ad..42ebd85 100644
--- a/index.html
+++ b/index.html
@@ -72,6 +72,28 @@
       line-height: 0;
       background: none;
       transition: background-color 400ms;
+
+      &::before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        inset-inline-start: 0;
+        inset-block-start: 0;
+        inline-size: 100%;
+        block-size: 100%;
+        border-radius: 2ch;
+        animation: flicker 1s linear infinite alternate;
+      }
+    }
+
+    @keyframes flicker {
+      from {
+        background-color: hsl(216deg 90% 80% / 0.05);
+      }
+
+      to {
+        background-color: hsl(216deg 90% 80% / 0.25);
+      }
     }
 
     #ascii-container button:hover,