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
2be25fd
verified
| <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> |