Add gradient fill button

diff --git a/index.html b/index.html
index 3680d7ceebcfeef4f4fba65e4213bcb0f1776aef..2925718d1071f3678a96eb652d8ffa971d791c36 100644 (file)
--- 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>