From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 6 Feb 2022 01:14:07 +0000 (-0800)
Subject: Add icon-button
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=cec582c84777437066ca8c4c23d6fe5267c8c2a2;p=css-loaders

Add icon-button
---

diff --git a/index.html b/index.html
index cc6c76f..41cede6 100644
--- a/index.html
+++ b/index.html
@@ -82,6 +82,22 @@
       animation: spin 1s infinite;
     }
 
+    .icon-button {
+      display: inline;
+      height: 24px;
+      width: 24px;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      background: none;
+    }
+
+    .icon-button:hover,
+    .icon-button:focus {
+      cursor: pointer;
+      animation: spin 0.2s linear 1;
+    }
+
     /* Dividers */
 
     @keyframes shiftRight {
@@ -138,6 +154,16 @@
       <p>Some p text next to an inline-spinner:
         <span class="inline-spinner"></span>
       </p>
+
+      <p>Inline refresh icon button with rotation on hover or focus:
+        <button aria-label="Refresh" class="icon-button">
+          <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="#000">
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
+          </svg>
+        </button>
+      </p>
     </section>
 
     <section>