From: Ardis Lu <ardisglu@gmail.com>
Date: Tue, 9 May 2023 04:39:36 +0000 (-0700)
Subject: Add link hovers section
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=bc1ddd10c21d3cc61701c4c2e17abef1237abb7d;p=css-loaders

Add link hovers section
---

diff --git a/index.html b/index.html
index d7f0a9c..07eb185 100644
--- a/index.html
+++ b/index.html
@@ -303,6 +303,22 @@
       transform: translateX(4px);
       transition: transform 200ms;
     }
+
+    /* Link hovers */
+
+    .thick-underline {
+      font-size: 2rem;
+      color: inherit;
+      text-decoration: underline;
+      transition: color 600ms;
+    }
+
+    .thick-underline:hover,
+    .thick-underline:focus {
+      color: hsl(216deg 80% 40%);
+      text-decoration-thickness: 0.2em;
+      transition: color 200ms;
+    }
   </style>
   <link rel="icon" href="data:,">
   <title>css-loaders</title>
@@ -422,6 +438,12 @@
         <span>→</span>
       </button>
     </section>
+
+    <section>
+      <h1>Link hovers</h1>
+
+      <a href="https://example.com" class="thick-underline">Thick underline</a>
+    </section>
 </body>
 
 </html>
\ No newline at end of file