From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 26 Nov 2023 03:39:08 +0000 (-0800)
Subject: Add gradient fill button
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=2d19334b0a94fcf8fb51a4b0258509d4d0a8e3e3;p=css-loaders

Add gradient fill button
---

diff --git a/index.html b/index.html
index 3680d7c..2925718 100644
--- a/index.html
+++ b/index.html
@@ -339,6 +339,38 @@
       transition: opacity 400ms;
     }
 
+    .gradient-fill {
+      background: transparent;
+      overflow: hidden;
+      position: relative;
+    }
+
+    .gradient-fill::after {
+      content: "";
+      position: absolute;
+      z-index: -1;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: conic-gradient(hsl(360deg 80% 90%),
+          hsl(315deg 80% 90%),
+          hsl(270deg 80% 90%),
+          hsl(225deg 80% 90%),
+          hsl(180deg 80% 90%),
+          hsl(135deg 80% 90%),
+          hsl(90deg 80% 90%),
+          hsl(45deg 80% 90%),
+          hsl(0deg 80% 90%));
+      opacity: 0;
+      transition: opacity 600ms;
+    }
+
+    :is(.gradient-fill:hover, .gradient-fill:focus)::after {
+      opacity: 1;
+      transition: opacity 300ms;
+    }
+
     /* Link hovers */
 
     .thick-underline {
@@ -499,6 +531,8 @@
       <button class="arrow-movement">Arrow movement</button>
 
       <button class="gradient-shadow">Gradient drop shadow</button>
+
+      <button class="gradient-fill">Gradient fill</button>
     </section>
 
     <section>