From 6351a91e37b1b1e411508aa189c709f071ec8085 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Sat, 11 Nov 2023 20:21:23 -0800
Subject: [PATCH] Add gradient shift link hover

---
 index.html | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/index.html b/index.html
index 2a98a92..3680d7c 100644
--- a/index.html
+++ b/index.html
@@ -354,6 +354,34 @@
       text-decoration-thickness: 0.2em;
       transition: color 200ms;
     }
+
+    .gradient-shift {
+      font-size: 1.5rem;
+      font-weight: 500;
+      background-clip: text;
+      -webkit-background-clip: text;
+      color: transparent;
+      background-image: linear-gradient(90deg,
+          hsl(360deg 80% 50%),
+          hsl(315deg 80% 50%),
+          hsl(270deg 80% 50%),
+          hsl(225deg 80% 50%),
+          hsl(180deg 80% 50%),
+          hsl(135deg 80% 50%),
+          hsl(90deg 80% 50%),
+          hsl(45deg 80% 50%),
+          hsl(0deg 80% 50%) 50%,
+          hsl(216deg 50% 50%) 50%);
+      background-size: 200% 100%;
+      background-position: 100% 0%;
+      transition: background-position 800ms;
+    }
+
+    .gradient-shift:hover,
+    .gradient-shift:focus {
+      background-position: 0% 0%;
+      transition: background-position 400ms;
+    }
   </style>
   <link rel="icon" href="data:,">
   <title>css-loaders</title>
@@ -477,6 +505,8 @@
       <h1>Link hovers</h1>
 
       <a href="https://example.com" class="thick-underline">Thick underline</a>
+
+      <a href="https://example.com" class="gradient-shift">Gradient shift</a>
     </section>
 </body>
 
-- 
2.47.3