From bf29aa9bd7a1b711a2ee87608c613f3cd78e2f79 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <rawr@sebin-nyshkim.net>
Date: Fri, 20 Jun 2025 14:03:38 +0200
Subject: [PATCH] feat: :sparkles: add button component

---
 src/components/ref-button.webc | 40 ++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/components/ref-button.webc

diff --git a/src/components/ref-button.webc b/src/components/ref-button.webc
new file mode 100644
index 0000000..367166c
--- /dev/null
+++ b/src/components/ref-button.webc
@@ -0,0 +1,40 @@
+<button webc:root="override"><slot></slot></button>
+
+<style webc:scoped="button">
+  :host {
+    --gradient-dir: to bottom right;
+    position: relative;
+
+    background: linear-gradient(
+      var(--gradient-dir),
+      var(--clr-box-gradient-start) 0%,
+      var(--clr-box-gradient-end) 50%
+    );
+
+    color: white;
+    font-size: 1em;
+    font-weight: bold;
+
+    box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
+
+    border: none;
+    border-radius: 0.5em;
+    padding: 0.5em 1em;
+
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  :host::before {
+    content: '';
+    position: absolute;
+    inset: var(--border-thin);
+    background-color: var(--clr-box-background);
+    border-radius: inherit;
+    z-index: -1;
+  }
+
+  :host:active {
+    --gradient-dir: to top left;
+  }
+</style>