@acca-alex-22/custom-btn/dist/custom-button.js

A resuable custom button with border animation

class o extends HTMLElement {
  constructor() {
    super();
    const e = this.attachShadow({ mode: "open" }), t = document.createElement("div");
    t.classList.add("wrapper");
    const n = document.createElement("button");
    n.textContent = this.getAttribute("label") || "Click Me", t.appendChild(n);
    const a = document.createElement("style");
    a.innerHTML = `
        
        button {
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            border: none;
            background-color: #007bff;
            color: white;
            background: linear-gradient(135deg, #007bff, #00c6ff);
            background-size: 600% 600%;
            transition: opacity 0.4s ease;
            animation: gradientShift 4s ease infinite;
            animation-play-state: paused;
            font-weight: 600;
            }


            button:hover {
                animation-play-state: running;
            }

            @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
            }        
        `, e.appendChild(t), e.appendChild(a);
  }
  static get observedAttributes() {
    return ["label"];
  }
}
customElements.define("radiant-button", o);
export {
  o as RadiantButton
};