first

frontend/components/ui/Button.tsx

@@ -12,21 +12,36 @@ const Button = ({
   size = 'lg',
 }: ButtonProps) => {
   const sizeClasses = {
-    sm: 'h-10 text-sm',
-    md: 'h-12 text-base',
-    lg: 'h-14 text-xl',
+    sm: 'h-10 text-sm px-4',
+    md: 'h-12 text-base px-6',
+    lg: 'h-14 text-lg px-8',
   }
 
   return (
     <button
       onClick={onClick}
-      className={`cursor-pointer rounded-xl transition-all duration-500 hover:shadow-2xl ${sizeClasses[size]} ${className}`}
+      className={`
+        cursor-pointer 
+        rounded-2xl 
+        transition-all 
+        duration-300 
+        font-medium
+        shadow-lg
+        hover:shadow-2xl
+        hover:scale-105
+        active:scale-95
+        backdrop-blur-sm
+        ${sizeClasses[size]} 
+        ${className}
+      `}
       type={type}
     >
-      {leftIcon && <span className="mr-2 flex items-center">{leftIcon}</span>}
-      {midIcon && <span className="flex items-center">{midIcon}</span>}
-      <span className="text-center font-normal">{text}</span>
-      {rightIcon && <span className="ml-2 flex items-center">{rightIcon}</span>}
+      <div className="flex items-center justify-center gap-2">
+        {leftIcon && <span className="flex items-center">{leftIcon}</span>}
+        {midIcon && <span className="flex items-center">{midIcon}</span>}
+        <span className="text-center">{text}</span>
+        {rightIcon && <span className="flex items-center">{rightIcon}</span>}
+      </div>
     </button>
   )
 }