components/glowing-button.js

class GlowingButton extends HTMLElement {
  connectedCallback() {
    const text = this.getAttribute('text') || 'Button';
    const href = this.getAttribute('href') || '#';
    const size = this.getAttribute('size') || 'md';
    const glow = this.hasAttribute('glow');
    const variant = this.getAttribute('variant') || 'solid';
    
    const sizes = {
      sm: 'px-4 py-2 text-sm',
      md: 'px-6 py-3 text-base',
      lg: 'px-8 py-4 text-lg',
      xl: 'px-10 py-5 text-xl'
    };

    const variants = {
      solid: `
        background: linear-gradient(135deg, #4f46e5, #ec4899);
        color: white;
      `,
      outline: `
        background: transparent;
        color: white;
        border: 2px solid white;
      `
    };

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .glow-btn {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
          border-radius: 9999px;
          overflow: hidden;
          transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
          z-index: 1;
          ${variants[variant]}
          ${sizes[size]}
        }
        
        .glow-btn::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(135deg, #4f46e5, #ec4899);
          z-index: -1;
          opacity: ${variant === 'solid' ? 1 : 0};
          transition: opacity 0.5s ease;
        }
        
        .glow-btn::after {
          content: '';
          position: absolute;
          top: -5px;
          left: -5px;
          right: -5px;
          bottom: -5px;
          background: linear-gradient(135deg, #4f46e5, #ec4899);
          z-index: -2;
          filter: blur(15px);
          opacity: ${glow ? '0.5' : '0'};
          transition: opacity 0.5s ease;
        }
        
        .glow-btn:hover::before {
          opacity: ${variant === 'outline' ? '0.2' : '1'};
        }
        
        .glow-btn:hover::after {
          opacity: ${glow ? '0.8' : '0.5'};
        }
        
        .glow-btn:hover {
          transform: translateY(-5px);
          box-shadow: 0 20px 25px -5px rgba(79, 70, 229, 0.3);
        }
        
        .glow-btn:active {
          transform: translateY(0);
        }
      </style>
      
      <a href="${href}" class="glow-btn">
        ${text}
        ${glow ? '<span class="absolute inset-0 animate-ping opacity-20 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full"></span>' : ''}
      </a>
    `;
  }
}
customElements.define('glowing-button', GlowingButton);