Spaces:
Running
Running
File size: 2,715 Bytes
44f4bf1 a8624fc 44f4bf1 a8624fc 44f4bf1 a8624fc 44f4bf1 a8624fc 44f4bf1 a8624fc 44f4bf1 a8624fc 44f4bf1 a8624fc 44f4bf1 a8624fc 44f4bf1 a8624fc 44f4bf1 a8624fc 44f4bf1 a8624fc 44f4bf1 a8624fc | 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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
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); |