Update templates/menu.html

templates/menu.html

@@ -647,7 +647,7 @@ form-check-input addon-option{
     background-color: white;
     font-size: 16px;
     cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
+    transition: color 0.3s, border 0.3s;
     width: 120px; /* Ensures buttons are of equal width */
     text-align: center;
 }
@@ -660,15 +660,14 @@ form-check-input addon-option{
 
 /* Hover effect for buttons */
 .category-btn:hover {
-    background-color: #ff7043;
-    color: white;
+    border-color: #ff7043; /* Change border color on hover */
+    color: #ff7043; /* Change text color on hover */
 }
 
-/* Highlight selected button */
+/* Highlight selected button (no background color change) */
 .active-btn {
-    background-color: #ff7043;
-    color: white;
-    border: 2px solid #ff7043;
+    border-color: #ff7043; /* Border color remains orange */
+    color: #ff7043; /* Text color changes to orange */
 }
 
 /* Example icons from Font Awesome, adjust based on your icon class */