button components - part 2

ropdias · Jul 7, 2024 · cd2701b · cd2701b
1 parent dae58c6
commit cd2701b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/src/index.html b/src/index.html
@@ -18,5 +18,10 @@
       <span href="#" class="btn btn-md">Label</span>
       <button href="#" class="btn btn-lg">Label</button>
     </div>
+    <div class="flex gap-1">
+      <a aria-label="label" href="#" class="btn btn-sm"></a>
+      <span aria-label="label" href="#" class="btn btn-md"></span>
+      <button aria-label="label" href="#" class="btn btn-lg"></button>
+    </div>
   </body>
 </html>
diff --git a/src/styles/buttons.css b/src/styles/buttons.css
@@ -40,3 +40,25 @@
   padding: 1rem 2rem;
   font-size: 1.125rem;
 }
+
+.btn[aria-label] {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    border-radius: inherit;
+    inset: 0.09375rem;
+    background-color: var(--bg-color);
+  }
+
+  &::after {
+    content: attr(aria-label);
+    background: var(--btn-bg-color);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    position: relative;
+    z-index: 1;
+  }
+}