Update templates/menu.html

templates/menu.html

@@ -11,22 +11,28 @@
 
 
 /* subbu */
-      .addbutton .btn {
-  background: linear-gradient(135deg, #28a745, #006400); /* Gradient green */
-  color: white; /* Make the text color white */
-  border: none; /* Remove the border */
+ .addbutton .btn {
+  background: linear-gradient(135deg, #ffffff, #f0f0f0); /* Gradient white background */
+  color: transparent; /* Make text color transparent */
+  background-clip: text; /* Apply the gradient to the text */
+  -webkit-background-clip: text; /* For Safari compatibility */
+  border: 1px solid #90ee90; /* Light green border */
   padding: 6px 15px; /* Smaller padding */
   font-size: 14px; /* Smaller font size */
   border-radius: 5px; /* Optional: round the corners */
-  transition: background 0.3s ease; /* Add transition effect for hover */
-  margin-left:10px;
+  transition: background 0.3s ease, border-color 0.3s ease; /* Add transition effect for hover */
+  margin-left: 10px; /* Margin for positioning */
 }
 
 .addbutton .btn:hover {
-  background: linear-gradient(135deg, #006400, #28a745); /* Reverse gradient for hover effect */
+  background: linear-gradient(135deg, #f0f0f0, #ffffff); /* Reverse gradient for hover effect */
+  border-color: #28a745; /* Darker green border on hover */
+  background-clip: text; /* Ensure the gradient is clipped to the text on hover */
+  -webkit-background-clip: text; /* Safari compatibility */
 }
 
 
+
 .customisable-text {
     color: #28a745; /* Same color as the "ADD" button */
     font-size: 12px; /* Same font size as the "ADD" button */