Spaces:

ProjectGenesis
/

awesome-button-ui

Running

App Files Files Community

ProjectGenesis commited on Aug 19, 2025

Commit

2be25fd

verified ·

1 Parent(s): e003c70

Build a complete HTML file with TailwindCSS + custom CSS. The page should display five futuristic pill-shaped neon buttons on a dark gradient background. Design Requirements Background: dark-to-black gradient with subtle glowing grid overlay. Buttons: pill-shaped (true modern capsule silhouette), matte black interior, bold neon-colored text. Border: continuously rotating RGB trail with no pauses or snapping. Implement the border with a conic-gradient and a CSS custom property --a. Use @property to declare --a and animate it with @keyframes border-spin { from { --a:0turn } to { --a:1turn } }. Mask the gradient so only a clean, even stroke follows the capsule outline (no bleeding glow). Example core CSS that MUST be used: @property --a { syntax: '<angle>'; inherits: false; initial-value: 0turn; } @keyframes border-spin { from { --a: 0turn; } to { --a: 1turn; } } .neon-button::before { --a: 0turn; content:""; position:absolute; inset:0; border-radius:9999px; padding:3px; /* border thickness */ background: conic-gradient(from var(--a), rgba(255,0,0,.9), rgba(255,165,0,.9), rgba(255,255,0,.9), rgba(0,255,255,.9), rgba(128,0,128,.9), rgba(255,0,0,.9) ); animation: border-spin 3s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; } Hover effects: slight lift and soft glow. Active state: gentle press-down. Glow layer: add a subtle blurred drop-shadow behind each button matching its color theme. Variants: 5 buttons with different border palettes: cyan, purple, green, orange/red, and pink. Layout: center the buttons in a flex container; wrap responsively on smaller screens. Keep the entire project self-contained in one HTML file, no external CSS needed. - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: awesome-button-ui
+emoji: 🐳
+colorFrom: green
+colorTo: blue
 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,328 @@
-<!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 Futuristic Pill Buttons</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* Predefined custom properties for each button */
+        :root {
+            /* Glow intensities */
+            --glow-intensity: 12px;
+            /* Button colors */
+            --cyan: rgba(0, 255, 255, 0.9);
+            --purple: rgba(128, 0, 128, 0.9);
+            --green: rgba(50, 255, 150, 0.9);
+            --red: rgba(255, 69, 0, 0.9);
+            --orange: rgba(255, 165, 0, 0.9);
+            --pink: rgba(255, 20, 147, 0.9);
+        }
+        /* Required property declaration for animation */
+        @property --a {
+            syntax: "<angle>";
+            inherits: false;
+            initial-value: 0turn;
+        }
+        /* Required border spin animation */
+        @keyframes border-spin {
+            from { --a: 0turn; }
+            to { --a: 1turn; }
+        }
+        /* Glowing grid background */
+        .page-bg {
+            position: relative;
+            overflow: hidden;
+            background: linear-gradient(135deg, #0c0b15 0%, #111 50%, #080710 100%);
+        }
+        .page-bg::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image:
+                linear-gradient(rgba(21, 20, 38, 0.5) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(21, 20, 38, 0.5) 1px, transparent 1px);
+            background-size: 50px 50px;
+            filter: blur(0.3px);
+            opacity: 0.25;
+            z-index: 1;
+        }
+        .glow-effects::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 150%;
+            height: 150%;
+            background: radial-gradient(ellipse at center,
+                rgba(7, 213, 231, 0.05) 0%,
+                rgba(183, 68, 184, 0.03) 40%,
+                rgba(0,0,0,0) 70%);
+            animation: rotate-glow 90s linear infinite;
+            transform: translate(-20%, -20%);
+            z-index: 2;
+        }
+        @keyframes rotate-glow {
+            from { transform: translate(-20%, -20%) rotate(0deg); }
+            to { transform: translate(-20%, -20%) rotate(360deg); }
+        }
+        /* Button container */
+        .button-container {
+            position: relative;
+            z-index: 10;
+            padding: 2rem;
+            opacity: 0.98;
+        }
+        /* Button Base Styling */
+        .neon-button {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1.25rem 2.5rem;
+            border-radius: 9999px;
+            background: #080516; /* Deep matte black */
+            color: white;
+            font-size: 1.5rem;
+            font-weight: 800;
+            text-transform: uppercase;
+            letter-spacing: 2.5px;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            margin: 1.5rem;
+            min-width: 220px;
+            box-shadow: 0 0 15px rgba(0, 231, 255, 0.1);
+            z-index: 3;
+        }
+        /* Required border animation styling from prompt */
+        .neon-button::before {
+            --a: 0turn;
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: 9999px;
+            padding: 3px; /* Border thickness */
+            background: conic-gradient(from var(--a),
+                rgba(255,0,0,.9),
+                rgba(255,165,0,.9),
+                rgba(255,255,0,.9),
+                rgba(0,255,255,.9),
+                rgba(128,0,128,.9),
+                rgba(255,0,0,.9));
+            animation: border-spin 3s linear infinite;
+            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            z-index: -1;
+        }
+        /* Hover effects */
+        .neon-button:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 30px rgba(0, 195, 255, 0.2);
+        }
+        .neon-button:active {
+            transform: translateY(2px);
+            box-shadow: 0 0 10px rgba(0, 217, 255, 0.2);
+        }
+        /* Button-specific colors */
+        .cyan-button {
+            text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
+            box-shadow: 0 0 30px rgba(0, 217, 255, 0.25);
+        }
+        .cyan-button:hover {
+            box-shadow: 0 0 40px rgba(0, 195, 255, 0.5);
+            text-shadow: 0 0 15px var(--cyan);
+        }
+        .purple-button {
+            text-shadow: 0 0 10px rgba(128, 0, 128, 0.7);
+            box-shadow: 0 0 30px rgba(128, 0, 128, 0.25);
+        }
+        .purple-button:hover {
+            box-shadow: 0 0 40px rgba(128, 0, 128, 0.5);
+            text-shadow: 0 0 15px var(--purple);
+        }
+        .green-button {
+            text-shadow: 0 0 10px rgba(0, 255, 100, 0.7);
+            box-shadow: 0 0 30px rgba(0, 255, 100, 0.25);
+        }
+        .green-button:hover {
+            box-shadow: 0 0 40px rgba(0, 255, 100, 0.5);
+            text-shadow: 0 0 15px var(--green);
+        }
+        .orange-button {
+            text-shadow: 0 0 10px rgba(255, 165, 0, 0.7);
+            box-shadow: 0 0 30px rgba(255, 165, 0, 0.25);
+        }
+        .orange-button:hover {
+            box-shadow: 0 0 40px rgba(255, 165, 0, 0.5);
+            text-shadow: 0 0 15px var(--orange);
+        }
+        .pink-button {
+            text-shadow: 0 0 10px rgba(255, 20, 147, 0.7);
+            box-shadow: 0 0 30px rgba(255, 20, 147, 0.25);
+        }
+        .pink-button:hover {
+            box-shadow: 0 0 40px rgba(255, 20, 147, 0.5);
+            text-shadow: 0 0 15px var(--pink);
+        }
+        /* Title styling */
+        .futuristic-title {
+            position: relative;
+            font-size: 4rem;
+            font-weight: 800;
+            background: linear-gradient(to right,
+                #00eeff,
+                #ff00c3 30%,
+                #ff8c00 60%,
+                #d400ff 80%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            text-align: center;
+            letter-spacing: 0.08em;
+            text-shadow: 0 0 15px rgba(255,255,255,0.3);
+            margin-bottom: 2rem;
+            animation: title-shine 3s infinite alternate;
+        }
+        @keyframes title-shine {
+            from { filter: hue-rotate(0deg); }
+            to { filter: hue-rotate(45deg); }
+        }
+        @media (max-width: 640px) {
+            .futuristic-title {
+                font-size: 2.5rem;
+            }
+            .neon-button {
+                font-size: 1.2rem;
+                padding: 1rem 2rem;
+                min-width: 200px;
+            }
+        }
+    </style>
+</head>
+<body class="page-bg min-h-screen flex flex-col items-center justify-center overflow-hidden relative glow-effects">
+    <!-- Decorative floating particles -->
+    <div class="particles">
+        <!-- Generated using JS -->
+    </div>
+    <div class="flex flex-col items-center justify-center h-full pb-12 button-container">
+        <h1 class="futuristic-title pt-10 mb-8 px-4">
+            Neon Border Controls
+        </h1>
+        <div class="flex flex-wrap justify-center items-center">
+            <!-- Cyan Button -->
+            <button class="neon-button cyan-button">
+                <span class="drop-shadow-glow">CYAN CHANNEL</span>
+            </button>
+            <!-- Purple Button -->
+            <button class="neon-button purple-button">
+                <span class="drop-shadow-glow">PURPLE WAVE</span>
+            </button>
+            <!-- Green Button -->
+            <button class="neon-button green-button">
+                <span class="drop-shadow-glow">GREEN SCANNER</span>
+            </button>
+        </div>
+        <div class="flex flex-wrap justify-center items-center">
+            <!-- Orange Button -->
+            <button class="neon-button orange-button">
+                <span class="drop-shadow-glow">ORANGE SYSTEM</span>
+            </button>
+            <!-- Pink Button -->
+            <button class="neon-button pink-button">
+                <span class="drop-shadow-glow">PINK MATRIX</span>
+            </button>
+        </div>
+    </div>
+    <!-- Subtle footer with reflection -->
+    <div class="absolute bottom-0 w-full text-center p-4 text-blue-200/30 text-sm tracking-wider font-light">
+        SECURITY ACCESS PANEL | VER 2.3.9
+    </div>
+    <script>
+        // Create floating particles effect
+        document.addEventListener('DOMContentLoaded', () => {
+            const particlesContainer = document.querySelector('.particles');
+            const particleCount = 20;
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.classList.add('particle');
+                particle.style.position = 'absolute';
+                particle.style.borderRadius = '50%';
+                particle.style.width = `${Math.random() * 5 + 1}px`;
+                particle.style.height = particle.style.width;
+                particle.style.background = i % 3 === 0
+                    ? 'rgba(0,200,255,0.8)'
+                    : i % 3 === 1
+                        ? 'rgba(200,0,255,0.5)'
+                        : 'rgba(255,150,0,0.5)';
+                particle.style.left = `${Math.random() * 100}%`;
+                particle.style.top = `${Math.random() * 100}%`;
+                particle.style.boxShadow = `0 0 ${Math.random() * 15 + 5}px ${particle.style.background}`;
+                // Animation properties
+                particle.animate([
+                    {
+                        transform: 'translateY(0)',
+                        opacity: 0.7
+                    },
+                    {
+                        transform: `translateY(${Math.random() > 0.5 ? '-' : ''}${Math.random() * 20 + 10}px)`,
+                        opacity: 0.2
+                    }
+                ], {
+                    duration: Math.random() * 5000 + 3000,
+                    iterations: Infinity,
+                    direction: 'alternate',
+                    easing: 'ease-in-out'
+                });
+                particlesContainer.appendChild(particle);
+            }
+            // Button hover enhancement
+            document.querySelectorAll('.neon-button').forEach(button => {
+                button.addEventListener('mouseenter', () => {
+                    button.classList.add('transform', 'transition');
+                });
+                button.addEventListener('mouseleave', () => {
+                    button.classList.remove('transform', 'transition');
+                });
+            });
+        });
+    </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/awesome-button-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>