improvise the button , explain , comment , find bug , doccument improvise these acording to ui

index.html

@@ -236,17 +236,25 @@
   <span class="text-green-400">return</span> total;
 }</div>
         <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 onclick="explainCode()" class="group relative bg-gray-800/50 hover:bg-gray-700/70 border border-gray-700 hover:border-blue-500 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-blue-500/20">
+            <div class="absolute inset-0 bg-blue-500/10 group-hover:bg-blue-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+            <i data-feather="book-open" class="mr-2 w-4 h-4 text-blue-400"></i> 
+            <span class="relative">Explain</span>
           </button>
-          <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 onclick="commentCode()" class="group relative bg-gray-800/50 hover:bg-gray-700/70 border border-gray-700 hover:border-purple-500 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-purple-500/20">
+            <div class="absolute inset-0 bg-purple-500/10 group-hover:bg-purple-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+            <i data-feather="message-square" class="mr-2 w-4 h-4 text-purple-400"></i> 
+            <span class="relative">Comment</span>
           </button>
-          <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 onclick="analyzeCode()" class="group relative bg-gray-800/50 hover:bg-gray-700/70 border border-gray-700 hover:border-red-500 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-red-500/20">
+            <div class="absolute inset-0 bg-red-500/10 group-hover:bg-red-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+            <i data-feather="bug" class="mr-2 w-4 h-4 text-red-400"></i> 
+            <span class="relative">Find Bugs</span>
           </button>
-          <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 onclick="documentCode()" class="group relative bg-gray-800/50 hover:bg-gray-700/70 border border-gray-700 hover:border-green-500 text-white py-2.5 px-3 rounded-lg text-sm font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-green-500/20">
+            <div class="absolute inset-0 bg-green-500/10 group-hover:bg-green-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+            <i data-feather="file-text" class="mr-2 w-4 h-4 text-green-400"></i> 
+            <span class="relative">Document</span>
           </button>
         </div>
 </div>
@@ -285,8 +293,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-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 onclick="applyFix()" class="group relative mt-4 w-full bg-gray-800/50 hover:bg-gray-700/70 border border-gray-700 hover:border-green-500 text-white py-3 px-4 rounded-lg font-medium flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-green-500/20">
+          <div class="absolute inset-0 bg-green-500/10 group-hover:bg-green-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+          <i data-feather="check-circle" class="mr-2 text-green-400"></i> 
+          <span class="relative">Apply Fix</span>
         </button>
 </div>
     </div>