Hugging Face's logo

Spaces:
ProjectGenesis
/
button-design-ui
Running

App Files Community
button-design-ui / index.html
ProjectGenesis's picture
ProjectGenesis
undefined - Follow Up Deployment
e51cff1 verified
raw
history blame contribute delete
11 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon AI Mode Buttons</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
animation: {
'border-pulse': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'border-rotate': 'rotate 3s linear infinite',
},
keyframes: {
pulse: {
'0%, 100%': { 'box-shadow': '0 0 10px 0px rgba(59, 130, 246, 0.5)' },
'50%': { 'box-shadow': '0 0 20px 5px rgba(59, 130, 246, 0.8)' },
},
rotate: {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' },
}
}
}
}
}
</script>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700&display=swap');
body {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Orbitron', sans-serif;
overflow-x: hidden;
position: relative;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.05) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 40%);
z-index: -1;
}
.grid-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(30, 41, 59, 0.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(30, 41, 59, 0.3) 1px, transparent 1px);
background-size: 40px 40px;
z-index: -1;
}
.neon-button {
position: relative;
border-radius: 9999px;
background: #0f172a;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
transition: all 0.3s ease;
overflow: hidden;
z-index: 1;
font-family: 'Orbitron', sans-serif;
}
.neon-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: conic-gradient(
rgba(255, 0, 0, 0.8),
rgba(255, 165, 0, 0.8),
rgba(255, 255, 0, 0.8),
rgba(0, 255, 255, 0.8),
rgba(128, 0, 128, 0.8),
rgba(255, 0, 0, 0.8)
);
border-radius: inherit;
z-index: -1;
animation: rotate 3s linear infinite;
filter: blur(8px);
}
.neon-button::after {
content: '';
position: absolute;
top: 1.5px;
left: 1.5px;
right: 1.5px;
bottom: 1.5px;
background: #0f172a;
border-radius: inherit;
z-index: -1;
}
.neon-button:hover {
transform: translateY(-2px);
box-shadow: 0 0 25px rgba(0, 195, 255, 0.5);
}
.neon-button:active {
transform: translateY(1px);
}
/* Variation 1 - Blue Emphasis */
.v1::before {
background: conic-gradient(
rgba(0, 195, 255, 0.9),
rgba(0, 140, 255, 0.9),
rgba(100, 100, 255, 0.9),
rgba(0, 255, 255, 0.9),
rgba(0, 195, 255, 0.9)
);
}
.v1:hover {
box-shadow: 0 0 25px rgba(0, 195, 255, 0.7);
}
/* Variation 2 - Purple Emphasis */
.v2::before {
background: conic-gradient(
rgba(180, 0, 255, 0.9),
rgba(139, 92, 246, 0.9),
rgba(192, 132, 252, 0.9),
rgba(180, 0, 255, 0.9)
);
}
.v2:hover {
box-shadow: 0 0 25px rgba(180, 0, 255, 0.7);
}
/* Variation 3 - Green Emphasis */
.v3::before {
background: conic-gradient(
rgba(0, 255, 150, 0.9),
rgba(50, 255, 50, 0.9),
rgba(0, 255, 200, 0.9),
rgba(0, 255, 150, 0.9)
);
}
.v3:hover {
box-shadow: 0 0 25px rgba(0, 255, 150, 0.7);
}
/* Variation 4 - Red/Orange Emphasis */
.v4::before {
background: conic-gradient(
rgba(255, 50, 50, 0.9),
rgba(255, 165, 0, 0.9),
rgba(255, 100, 0, 0.9),
rgba(255, 50, 50, 0.9)
);
}
.v4:hover {
box-shadow: 0 0 25px rgba(255, 50, 50, 0.7);
}
/* Variation 5 - Pink/Purple Emphasis */
.v5::before {
background: conic-gradient(
rgba(255, 0, 200, 0.9),
rgba(255, 105, 180, 0.9),
rgba(200, 0, 255, 0.9),
rgba(255, 0, 200, 0.9)
);
}
.v5:hover {
box-shadow: 0 0 25px rgba(255, 0, 200, 0.7);
}
.glow {
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
filter: blur(15px);
opacity: 0.7;
z-index: -2;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (max-width: 768px) {
.button-container {
flex-direction: column;
gap: 2.5rem;
}
.neon-button {
padding: 0.75rem 1.75rem;
font-size: 0.875rem;
}
}
</style>
</head>
<body>
<div class="grid-pattern"></div>
<div class="text-center mb-16 z-10">
<h1 class="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500 mb-3">
NEON AI BUTTONS
</h1>
<p class="text-slate-400 max-w-2xl mx-auto px-4">
Futuristic glowing neon buttons with animated RGB trails. Each variation has unique color emphasis and glow characteristics.
</p>
</div>
<div class="button-container flex flex-wrap justify-center items-center gap-10 px-4 z-10">
<!-- Variation 1 -->
<div class="relative">
<div class="absolute -inset-4 bg-cyan-500 rounded-full filter blur-xl opacity-30 animate-pulse"></div>
<button class="neon-button v1 px-8 py-3 text-cyan-200">
Register
</button>
<div class="glow bg-cyan-500 animate-pulse"></div>
</div>
<!-- Variation 2 -->
<div class="relative">
<div class="absolute -inset-4 bg-purple-500 rounded-full filter blur-xl opacity-30 animate-pulse"></div>
<button class="neon-button v2 px-8 py-3 text-purple-200">
Login
</button>
<div class="glow bg-purple-500 animate-pulse"></div>
</div>
<!-- Variation 3 -->
<div class="relative">
<div class="absolute -inset-4 bg-emerald-500 rounded-full filter blur-xl opacity-30 animate-pulse"></div>
<button class="neon-button v3 px-8 py-3 text-emerald-200">
Claim
</button>
<div class="glow bg-emerald-500 animate-pulse"></div>
</div>
<!-- Variation 4 -->
<div class="relative">
<div class="absolute -inset-4 bg-orange-500 rounded-full filter blur-xl opacity-30 animate-pulse"></div>
<button class="neon-button v4 px-8 py-3 text-orange-200">
Store
</button>
<div class="glow bg-orange-500 animate-pulse"></div>
</div>
<!-- Variation 5 -->
<div class="relative">
<div class="absolute -inset-4 bg-pink-500 rounded-full filter blur-xl opacity-30 animate-pulse"></div>
<button class="neon-button v5 px-8 py-3 text-pink-200">
Nioplay
</button>
<div class="glow bg-pink-500 animate-pulse"></div>
</div>
</div>
<div class="mt-16 text-slate-500 text-sm text-center max-w-2xl px-4 z-10">
<p>Each button features a continuously rotating RGB border trail with a unique color emphasis. The matte black center provides contrast for crisp white text, while the outer glow enhances the futuristic aesthetic.</p>
</div>
<script>
// Add interactive effects to buttons
document.querySelectorAll('.neon-button').forEach(button => {
button.addEventListener('mousemove', (e) => {
const rect = button.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
button.style.setProperty('--x', `${x}px`);
button.style.setProperty('--y', `${y}px`);
});
button.addEventListener('mouseleave', () => {
button.style.removeProperty('--x');
button.style.removeProperty('--y');
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ProjectGenesis/button-design-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>