From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 26 Dec 2022 09:53:26 +0000 (-0800)
Subject: Add arrow movement button
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=7e37b93f0491e7293e93b1121f472ddebb067e1a;p=css-loaders

Add arrow movement button
---

diff --git a/index.html b/index.html
index 2a23c02..40380f5 100644
--- a/index.html
+++ b/index.html
@@ -273,6 +273,25 @@
       max-height: 100%;
       transition: max-height 1700ms;
     }
+
+    button {
+      background: hsl(216deg 70% 85%);
+      padding: 16px;
+      border-radius: 16px;
+      border: 1px solid hsl(216deg 70% 80%);
+      font-weight: 700;
+      cursor: pointer;
+    }
+
+    button span {
+      display: inline-block;
+      transition: transform 400ms;
+    }
+
+    :is(button:hover, button:focus) span {
+      transform: translateX(4px);
+      transition: transform 200ms;
+    }
   </style>
   <link rel="icon" href="data:,">
   <title>css-loaders</title>
@@ -383,6 +402,15 @@
         </div>
       </div>
     </section>
+
+    <section>
+      <h1>Button hovers</h1>
+
+      <button>
+        Arrow movement
+        <span>→</span>
+      </button>
+    </section>
 </body>
 
 </html>
\ No newline at end of file