underline border animated for both abbey and blog

US-Artificial-Intelligence · Nov 20, 2023 · bd1ac74 · bd1ac74
1 parent 20a8bbb
commit bd1ac74
Showing 1 changed file with 38 additions and 6 deletions.
diff --git a/staging.html b/staging.html
@@ -19,6 +19,7 @@
 
 <title>U.S. Artificial Intelligence Inc.</title>
 
+
 <style>
 
     html, body {
@@ -42,15 +43,31 @@
         animation: fadeIn ease 1.5s forwards; /* adjust duration as needed */
     }
 
-    .underlineAnimated:after {
+    .underlineAnimated {
+        position: relative;
+        display: inline-block;
+        text-decoration: none;
+        --transform-dir: 0% 50%;
+    }
+
+
+    .underlineAnimated::after {
         display:block;
         content: '';
-        border-bottom: solid 2px white;  
-        transform: scaleX(0);  
-        transition: transform 250ms ease-in-out;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background: #fff;
+        transform: scaleX(0);
+        transform-origin: var(--transform-dir);
+        transition: transform 150ms ease-in-out;
     }
+
     .underlineAnimated:hover:after { transform: scaleX(1); }
-    .underlineAnimated:after{  transform-origin:  0% 50%; }
+
+
 
     .email-input {
         outline: 0;
@@ -270,7 +287,7 @@
                                 Answer a hundred-part questionnaire in seconds.
                             </div>
                             <div>
-                                Check out <a href="https://abbey.us.ai">Abbey</a>
+                                Check out <a class="underlineAnimated" style="font-weight: 700" href="https://abbey.us.ai">Abbey</a>
                             </div>
                             <div style="display:flex;padding-top:.5rem;flex-direction: column;gap:1rem">
                                 <input type="text" class="email-input" placeholder="Email" id="email" />
@@ -712,5 +729,20 @@
 
 
     </script>
+
+<script type="text/javascript">
+    document.querySelectorAll('.underlineAnimated').forEach(function(element) {
+    element.addEventListener('mouseout', function() {
+        this.style.setProperty('--transform-dir', '100% 50%');
+    });
+});
+
+document.querySelectorAll('.underlineAnimated').forEach(function(element) {
+    element.addEventListener('mouseover', function() {
+        this.style.setProperty('--transform-dir', '0% 50%');
+    });
+});
+
+</script>
 </body>
 </html>