diff --git a/llama_forge_rs/public/3dbutton.md b/llama_forge_rs/public/3dbutton.md
new file mode 100644
index 0000000..cfa0eb4
--- /dev/null
+++ b/llama_forge_rs/public/3dbutton.md
@@ -0,0 +1,157 @@
+```html
+<div>
+  <div>
+    <button class="button" style="margin-right: 1em; margin-bottom: 1em;">
+      <span>A</span>
+    </button>
+
+    <button class="button" style="margin-right: 1em;">
+      <span>BB</span>
+    </button>
+    <button class="button">
+      <span>CCCC</span>
+    </button>
+  </div>
+  <div>
+    <button class="button" style="margin-right: 1em;">
+      <span>DDDDDDDDDDDDDDDDDDDDDDDDDDD</span>
+    </button>
+</div>
+```
+
+```scss
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3rem;
+  background-color: rgb(225, 225, 225);
+  font-family: "Inter", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
+}
+
+.button {
+  --fl-shadow-color: rgba(5, 5, 5, 1);
+  --str-shadow-color: rgba(5, 5, 5, 0.5);
+  --shadow-color: rgba(5, 5, 5, 0.25);
+  --lt-shadow-color: rgba(5, 5, 5, 0.1);
+  
+  --highlight-color: rgba(255, 255, 255, 0.25);
+  --fl-highlight-color: rgba(255, 255, 255, 1);
+  
+  --edge-shadow: 0.15em;
+  --transition: all 250ms ease;
+  
+  all: unset;
+  cursor: pointer;
+  position: relative;
+  border-radius: 999vw;
+  padding: 1em 1.5em;
+  -webkit-tap-highlight-color: transparent;
+  background-color: rgba(0, 0, 0, 0.75);
+  box-shadow: 
+    -0.15em -0.15em 0.15em -0.075em var(--shadow-color),
+    0.15em -0.15em 0.15em -0.075em var(--lt-shadow-color),
+    0.0375em 0.0375em 0.0675em 0 var(--lt-shadow-color);
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    border-radius: inherit;
+    transition: var(--transition);
+  }
+
+  &::before {
+    z-index: 1;
+    inset: 0.025em;
+    box-shadow: 
+      0 0.05em 0.05em -0.01em var(--fl-shadow-color),
+      0 0.01em 0.01em -0.01em var(--str-shadow-color),
+      0.15em 0.3em 0.1em -0.01em var(--shadow-color);
+  }
+
+  &::after {
+    z-index: 2;
+    inset: 0.0125em;
+    background-image: linear-gradient(
+      135deg,
+      rgb(230, 230, 230),
+      rgb(180, 180, 180)
+    );
+    clip-path: inset(0 round 999vw);
+    box-shadow: 
+      0 0 0 0 inset var(--shadow-color),
+      -0.05em -0.05em 0.05em 0 inset var(--shadow-color),
+      0 0 0.05em 0.2em inset var(--highlight-color),
+      // 0.025em 0.05em 0.1em 0 inset var(--fl-highlight-color),
+      -0.075em -0.25em 0.25em 0.1em inset var(--shadow-color);
+  }
+
+  &:hover {
+    
+    &::before {
+      box-shadow: 
+        0 0.05em 0.0em -0.01em var(--fl-shadow-color),
+        0 0.01em 0.01em -0.01em var(--str-shadow-color),
+        0.1em 0.2em 0.066em -0.01em var(--shadow-color);
+    }
+
+    &::after {
+      clip-path: inset(clamp(1px, 0.0625em, 2px) round 999vw);
+      box-shadow: 
+        0.1em 0.15em 0.05em 0 inset var(--shadow-color),
+        -0.025em -0.03em 0.05em 0.025em inset var(--shadow-color),
+        0 0 0.05em 0.3em inset var(--highlight-color),
+        -0.075em -0.12em 0.2em 0.1em inset var(--shadow-color);
+    }
+  }
+
+  &:active {
+    &::before {
+      box-shadow: none;
+    }
+
+    &::after {
+      --shadow-color: rgba(85, 5, 5, 0.75); // red
+      --highlight-color: rgba(255, 80, 80, 0.25); // red
+      
+      box-shadow: 
+        0.15em 0.175em 0.075em 0 inset var(--shadow-color),
+        -0.025em -0.03em 0.05em 0.025em inset var(--shadow-color),
+        0 0 0.05em 0.4em inset var(--highlight-color),
+        -0.075em -0.12em 0.2em 0.1em inset var(--shadow-color);
+    }
+  }
+
+  span {
+    --text-gradient: linear-gradient(135deg, rgb(25, 25, 25), rgb(75, 75, 75));
+    
+    position: relative;
+    z-index: 3;
+    font-family: inherit;
+    letter-spacing: -0.05em;
+    font-weight: 500;
+    color: transparent;
+    background-image: var(--text-gradient);
+    background-clip: text;
+    transition: transform 250ms ease;
+    display: block;
+    text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
+  }
+
+  &:hover span {
+    transform: scale(0.975);
+  }
+
+  &:active span {
+    transform: scale(0.95);
+  }
+}
+```