new page :3

css/button.css

@@ -1,42 +1,66 @@
 .btn {
-    padding: 8px 16px;
+    padding: var(--space-sm) var(--space-md);
     border: 1px solid transparent;
-    border-radius: 8px;
-    font-weight: 400;
-    font-size: 15px;
+    border-radius: var(--radius-md);
+    font-weight: 500;
+    font-size: var(--text-sm);
     color: var(--text-color);
     background: var(--button-gradient);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
-    transition: all 0.3s ease;
+    box-shadow: var(--shadow-sm), var(--inset-shadow);
+    transition:
+        background var(--dur-fast) var(--ease-out-soft),
+        transform var(--dur-fast) var(--ease-out-soft),
+        box-shadow var(--dur-fast) var(--ease-out-soft);
     position: relative;
     overflow: hidden;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: 44px; /* Minimum touch target size for mobile */
+    gap: var(--space-xs);
+    min-height: 44px;
     text-align: center;
+    -webkit-tap-highlight-color: transparent;
 }
 
-.btn:hover {
+.btn::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
+    transform: translateX(-100%);
+    transition: transform var(--dur-med) var(--ease-out-soft);
+    pointer-events: none;
+}
+
+.btn:hover,
+.btn:focus-visible {
     background: var(--button-hover-gradient);
-    transform: translateY(-1px);
-    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
+    transform: translateY(-1px) scale(1.012);
+    box-shadow: var(--shadow-md), var(--accent-glow-ring);
+    color: var(--text-color);
+}
+
+.btn:hover::before,
+.btn:focus-visible::before {
+    transform: translateX(100%);
+}
+
+.btn:active {
+    transform: translateY(0) scale(0.99);
 }
 
-/* Mobile button improvements */
 @media (max-width: 768px) {
     .btn {
         min-height: 48px;
-        padding: 12px 20px;
-        font-size: 14px;
+        padding: var(--space-md) var(--space-lg);
+        font-size: var(--text-sm);
     }
 }
 
 @media (max-width: 480px) {
     .btn {
-        padding: 10px 16px;
-        font-size: 13px;
+        padding: var(--space-sm) var(--space-md);
     }
-}
+}