Update templates/menu.html

templates/menu.html

@@ -8,6 +8,29 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <style>
+
+
+/* subbu */
+     .addbutton .btn {
+  background: linear-gradient(135deg, #28a745, #006400); /* Gradient green */
+  color: white; /* Make the text color white */
+  border: none; /* Remove the 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 */
+}
+
+.addbutton .btn:hover {
+  background: linear-gradient(135deg, #006400, #28a745); /* Reverse gradient for hover effect */
+}
+
+
+
+
+
+
+     
    body {
     font-family: Arial, sans-serif;
     background-color: #fdf4e3; /* Updated background color */
@@ -523,10 +546,22 @@ form-check-input addon-option{
             Customize <i class="bi bi-caret-right-fill"></i>
         </button>
 
-        <div class="card-body">
+        <!-- <div class="card-body">
             <h5 class="card-title">{{ item.Name }}</h5>
             <p class="card-text">${{ item.Price__c }}</p>
-        </div>
+        </div> -->
+      <div class="addbutton">
+  <div class="card-body d-flex align-items-center justify-content-between">
+    <div>
+      <h5 class="card-title">{{ item.Name }}</h5>
+      <p class="card-text">${{ item.Price__c }}</p>
+    </div>
+    <div>
+      <button class="btn btn-primary">Add</button>
+    </div>
+  </div>
+</div>
+
       
     </div>
 </div>