javascript-componets/button.js at main · nyagooh/javascript-componets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
class CustomButton extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: "open" });

      const button = document.createElement("button");
      button.textContent = this.getAttribute("label") || "Click Me";

      const style = document.createElement("style");
      style.textContent = `
        button {
          background: #007bff;
          color: white;
          border: none;
          padding: 10px 20px;
          font-size: 16px;
          cursor: pointer;
          border-radius: 5px;
          width: 5%;
          max-width: 300px;
        }
        button:hover {
          background: #0056b3;
        }
        @media (max-width: 600px) {
          button {
            font-size: 14px;
            padding: 8px 16px;
          }
        }
      `;

      this.shadowRoot.append(style, button);
    }
  }

  customElements.define("custom-button", CustomButton);