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

@@ -74,7 +74,7 @@
             position: absolute;
             inset: 0;
             border-radius: 9999px;
-            padding: 2px;
+            padding: 3px;
             background: conic-gradient(from var(--a), 
                 rgba(255,0,0,.9), 
                 rgba(255,165,0,.9), 
@@ -96,13 +96,9 @@
             right: 2px;
             bottom: 2px;
             background: rgba(30, 30, 30, 0.9);
-            border-radius: 9999px;
+            border-radius: 100px;
             z-index: -1;
         }
-        @keyframes border-spin {
-            0% { --a: 0turn; }
-            100% { --a: 1turn; }
-        }
 .pill-button:hover {
             box-shadow: 0 0 10px 2px;
         }
@@ -182,6 +178,11 @@
         .accordion[aria-expanded="true"] .accordion-content {
             max-height: 500px;
         }
+        @keyframes border-spin {
+            to {
+                --a: 1turn;
+            }
+        }
 @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); }
@@ -201,7 +202,12 @@
         .bg-orange-accent-gradient {
             background: linear-gradient(90deg, #FF6A00, transparent);
         }
-        .flex-\[0_0_auto\] { flex: 0 0 auto; }
+        @property --a {
+            syntax: '<angle>';
+            inherits: false;
+            initial-value: 0turn;
+        }
+.flex-\[0_0_auto\] { flex: 0 0 auto; }
         
         /* Mobile specific */
         @media (max-width: 1023px) {
@@ -233,11 +239,11 @@
                 </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 neon-button">
-<span>Purchase SC</span>
+                    <button id="btn-deposit" class="pill-button pill-button-primary px-8 py-3 text-lg">
+                        <span>Purchase SC</span>
                     </button>
-                        <button id="btn-withdraw" class="pill-button pill-button-secondary px-8 py-3 text-lg neon-button">
-<span>Redeem Now</span>
+                    <button id="btn-withdraw" class="pill-button pill-button-secondary px-8 py-3 text-lg">
+                        <span>Redeem Now</span>
                     </button>
             </div>
             
@@ -253,11 +259,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 neon-button">
-<span>Deposit SC</span>
+            <button class="pill-button pill-button-primary">
+                <span>Deposit SC</span>
             </button>
-                    <button class="pill-button pill-button-secondary neon-button">
-<span>Withdraw</span>
+            <button class="pill-button pill-button-secondary">
+                <span>Withdraw</span>
             </button>
         </div>
         
@@ -346,9 +352,9 @@
                 </div>
                 
                 <div class="flex flex-wrap gap-3">
-                    <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">
+                    <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">
                         <span>View Withdrawal History</span>
                         <i data-feather="chevron-right" class="w-4 h-4"></i>
                     </button>
@@ -461,8 +467,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 neon-button">Claim Your First Purchase Package</button>
-</div>
+                                        <button class="pill-button pill-button-primary px-6">Claim Your First Purchase Package</button>
+                                    </div>
                                 </td>
                             </tr>
                         </tbody>