Apply this button border trail animation for all buttons.

.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;

index.html

@@ -69,15 +69,24 @@
             z-index: 1;
         }
         .pill-button::before {
+            --a: 0turn;
             content: "";
             position: absolute;
-            top: 0;
-            left: 0;
-            width: 200%;
-            height: 100%;
-            background: conic-gradient(transparent, #FF6A00, #00E4FF, transparent);
+            inset: 0;
+            border-radius: 9999px;
+            padding: 2px;
+            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;
-            animation: border-trail 2.5s linear infinite;
         }
         .pill-button::after {
             content: "";
@@ -87,10 +96,14 @@
             right: 2px;
             bottom: 2px;
             background: rgba(30, 30, 30, 0.9);
-            border-radius: 100px;
+            border-radius: 9999px;
             z-index: -1;
         }
-        .pill-button:hover {
+        @keyframes border-spin {
+            0% { --a: 0turn; }
+            100% { --a: 1turn; }
+        }
+.pill-button:hover {
             box-shadow: 0 0 10px 2px;
         }
         .pill-button-primary {
@@ -169,11 +182,7 @@
         .accordion[aria-expanded="true"] .accordion-content {
             max-height: 500px;
         }
-        @keyframes border-trail {
-            0% { transform: translateX(-50%) rotate(0deg); }
-            100% { transform: translateX(-50%) rotate(360deg); }
-        }
-        @keyframes glow {
+@keyframes glow {
             0% { box-shadow: 0 0 0px 0px rgba(255, 106, 0, 0.6); }
             50% { box-shadow: 0 0 10px 3px rgba(255, 106, 0, 0.8); }
             100% { box-shadow: 0 0 0px 0px rgba(255, 106, 0, 0.6); }
@@ -224,28 +233,12 @@
                 </p>
                 
                 <div class="flex flex-wrap justify-center gap-4 mb-12">
-                    <button id="btn-deposit" class="pill-button pill-button-primary px-8 py-3 text-lg">
-                        <span>Purchase SC</span>
+                        <button id="btn-deposit" class="pill-button pill-button-primary px-8 py-3 text-lg neon-button">
+<span>Purchase SC</span>
                     </button>
-                    <button id="btn-withdraw" class="pill-button pill-button-secondary px-8 py-3 text-lg">
-                        <span>Redeem Now</span>
+                        <button id="btn-withdraw" class="pill-button pill-button-secondary px-8 py-3 text-lg neon-button">
+<span>Redeem Now</span>
                     </button>
-                </div>
-                
-                <div class="grid grid-cols-3 gap-6 w-full max-w-2xl">
-                    <div class="flex flex-col items-center">
-                        <div class="text-3xl font-bold font-['Orbitron'] text-[#FFD600]">100%</div>
-                        <div class="text-sm text-[#B8B8B8]">Secure</div>
-                    </div>
-                    <div class="flex flex-col items-center">
-                        <div class="text-3xl font-bold font-['Orbitron'] text-[#00E4FF]">24/7</div>
-                        <div class="text-sm text-[#B8B8B8]">Support</div>
-                    </div>
-                    <div class="flex flex-col items-center">
-                        <div class="text-3xl font-bold font-['Orbitron'] text-[#3CE27A]">Instant</div>
-                        <div class="text-sm text-[#B8B8B8]">Transactions</div>
-                    </div>
-                </div>
             </div>
             
             <div class="absolute -bottom-20 left-0 right-0 h-40 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10"></div>
@@ -260,11 +253,11 @@
 <div class="max-w-7xl mx-auto px-4 md:px-8 py-8 md:py-10">
         <!-- Sticky CTA bar for mobile -->
         <div class="sticky-cta-bar flex justify-center gap-3 md:hidden mb-6">
-            <button class="pill-button pill-button-primary">
-                <span>Deposit SC</span>
+                    <button class="pill-button pill-button-primary neon-button">
+<span>Deposit SC</span>
             </button>
-            <button class="pill-button pill-button-secondary">
-                <span>Withdraw</span>
+                    <button class="pill-button pill-button-secondary neon-button">
+<span>Withdraw</span>
             </button>
         </div>
         
@@ -353,9 +346,9 @@
                 </div>
                 
                 <div class="flex flex-wrap gap-3">
-                    <button class="pill-button pill-button-secondary bg-[rgba(0,228,255,0.15)]">Redeem Balance</button>
-                    <button id="btn-convert" class="pill-button pill-button-primary">Payment Method</button>
-                    <button class="flex items-center gap-2 px-4 py-2 rounded-full border border-[rgba(255,255,255,0.15)] hover:border-[#FF6A00] transition">
+                    <button class="pill-button pill-button-secondary bg-[rgba(0,228,255,0.15)] neon-button">Redeem Balance</button>
+                    <button id="btn-convert" class="pill-button pill-button-primary neon-button">Payment Method</button>
+<button class="flex items-center gap-2 px-4 py-2 rounded-full border border-[rgba(255,255,255,0.15)] hover:border-[#FF6A00] transition">
                         <span>View Withdrawal History</span>
                         <i data-feather="chevron-right" class="w-4 h-4"></i>
                     </button>
@@ -468,8 +461,8 @@
                                         </div>
                                         <h4 class="font-medium mb-2">No transactions yet</h4>
                                         <p class="text-[#B8B8B8] mb-6">Top up your wallet to get started</p>
-                                        <button class="pill-button pill-button-primary px-6">Claim Your First Purchase Package</button>
-                                    </div>
+                    <button class="pill-button pill-button-primary px-6 neon-button">Claim Your First Purchase Package</button>
+</div>
                                 </td>
                             </tr>
                         </tbody>