Add arrow movement button

diff --git a/index.html b/index.html
index 2a23c02da4bad51937a7a1992b03c74e049b9d10..40380f50696727be2b798c514e525eb43825e264 100644 (file)
--- 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