Spaces:

ProjectGenesis
/

button-design-ui

Running

App Files Files Community

ProjectGenesis commited on Aug 18, 2025

Commit

2c07407

verified ·

1 Parent(s): 7b31b19

Prompt: "Generate a sleek UI element of a glowing neon button labeled 'AI Mode'. The button should be pill-shaped with a dark background and a vibrant animated RGB border trail. The border should appear like it's moving around the button edge, transitioning smoothly between red, orange, yellow, cyan, and purple hues. The center of the button should have a matte black or dark grey fill with white bold text. Include a subtle soft glow and blur around the edge to enhance the futuristic AI aesthetic. The style should be modern, minimal, and tech-oriented." Generate 5 unique variations of this glowing 'AI Mode' button with different color emphasis and subtle glow styles. Keep the background dark and futuristic." - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +311 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Button Design Ui
-emoji: 🌖
-colorFrom: blue
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: button-design-ui
+emoji: 🐳
+colorFrom: yellow
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,311 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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">
+                AI Mode
+            </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">
+                AI Mode
+            </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">
+                AI Mode
+            </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">
+                AI Mode
+            </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">
+                AI Mode
+            </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>