make the button look good and acording to ui

index.html

@@ -235,21 +235,21 @@
 
   <span class="text-green-400">return</span> total;
 }</div>
-        <div class="grid grid-cols-2 gap-2 mt-4">
-          <button onclick="explainCode()" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-3 rounded-md text-sm font-medium flex items-center justify-center">
-            <i data-feather="book-open" class="mr-1 w-4 h-4"></i> Explain
+        <div class="grid grid-cols-2 gap-3 mt-4">
+          <button onclick="explainCode()" class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl">
+            <i data-feather="book-open" class="mr-2 w-4 h-4"></i> Explain
           </button>
-          <button onclick="commentCode()" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-3 rounded-md text-sm font-medium flex items-center justify-center">
-            <i data-feather="message-square" class="mr-1 w-4 h-4"></i> Comment
+          <button onclick="commentCode()" class="bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl">
+            <i data-feather="message-square" class="mr-2 w-4 h-4"></i> Comment
           </button>
-          <button onclick="analyzeCode()" class="bg-red-600 hover:bg-red-700 text-white py-2 px-3 rounded-md text-sm font-medium flex items-center justify-center">
-            <i data-feather="bug" class="mr-1 w-4 h-4"></i> Find Bugs
+          <button onclick="analyzeCode()" class="bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl">
+            <i data-feather="bug" class="mr-2 w-4 h-4"></i> Find Bugs
           </button>
-          <button onclick="documentCode()" class="bg-green-600 hover:bg-green-700 text-white py-2 px-3 rounded-md text-sm font-medium flex items-center justify-center">
-            <i data-feather="file-text" class="mr-1 w-4 h-4"></i> Document
+          <button onclick="documentCode()" class="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl">
+            <i data-feather="file-text" class="mr-2 w-4 h-4"></i> Document
           </button>
         </div>
-      </div>
+</div>
 <!-- Bug Explanation Terminal -->
       <div class="code-editor p-4 glow lg:col-span-1">
         <div class="flex items-center mb-4">
@@ -285,10 +285,10 @@
         </div>
         <pre id="fixedCode" class="text-gray-300 text-sm font-mono h-64 overflow-auto bg-gray-800 p-4 rounded">
 <span class="text-gray-500">// Fixed code will appear here after analysis</span></pre>
-        <button onclick="applyFix()" class="mt-4 w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-md font-medium flex items-center justify-center">
+        <button onclick="applyFix()" class="mt-4 w-full bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white py-3 px-4 rounded-lg font-medium flex items-center justify-center transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl">
           <i data-feather="check-circle" class="mr-2"></i> Apply Fix
         </button>
-      </div>
+</div>
     </div>
   </div>