Merge pull request #2 from ajm19826/main

Add wand button

Author: mathsite

src/app.js

@@ -13,6 +13,27 @@ fetch("buttons.json")
         <button class="${btn.class}">Click me</button>
       `;
 
+      root.appendChild(card);
+    });
+  });
+fetch("buttons.json")
+  .then(res => res.json())
+  .then(buttons => {
+    const root = document.getElementById("buttons");
+
+    buttons.forEach(btn => {
+      const card = document.createElement("div");
+      card.className = "button-card";
+
+      card.innerHTML = `
+        <h3>${btn.name}</h3>
+        <p>by ${btn.author}</p>
+        <div>
+          <button class="${btn.class}"></button>
+          ${btn.label ? `<div class="wand-label">${btn.label}</div>` : ""}
+        </div>
+      `;
+
       root.appendChild(card);
     });
   });

src/buttons.json

@@ -9,4 +9,11 @@
     "author": "core",
     "class": "btn-outline"
   }
+  {
+  "name": "Magic Wand",
+  "author": "ajm19826",
+  "class": "btn-wand",
+  "label": "Cast Spell"
+}
+
 ]

src/styles.css

@@ -65,3 +65,60 @@ footer {
   margin-top: 40px;
   opacity: 0.7;
 }
+/* ✨ Magic Wand Button */
+
+.btn-wand {
+  position: relative;
+  width: 60px;
+  height: 180px;
+  margin: 0 auto;
+  background: linear-gradient(180deg, #111827, #374151);
+  border-radius: 999px;
+  border: 2px solid #6366f1;
+  cursor: pointer;
+  outline: none;
+  overflow: visible;
+}
+
+/* Wand tip */
+.btn-wand::before {
+  content: "";
+  position: absolute;
+  top: -16px;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  background: radial-gradient(circle, #fde68a, #facc15);
+  border-radius: 50%;
+  transform: translateX(-50%);
+  box-shadow: 0 0 12px rgba(250,204,21,0.9);
+}
+
+/* Sparkles */
+.btn-wand::after {
+  content: "✨ ✦ ✧ ✨";
+  position: absolute;
+  top: -42px;
+  left: 50%;
+  transform: translateX(-50%) scale(0);
+  color: #fde68a;
+  font-size: 18px;
+  opacity: 0;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  pointer-events: none;
+}
+
+/* Click sparkle animation */
+.btn-wand:active::after {
+  transform: translateX(-50%) scale(1.4);
+  opacity: 1;
+}
+
+/* Text below the wand */
+.wand-label {
+  margin-top: 12px;
+  text-align: center;
+  font-size: 14px;
+  color: #c7d2fe;
+  user-select: none;
+}