Update templates/menu.html

templates/menu.html

@@ -72,8 +72,23 @@
     right: 10px;
     transform: translateY(-50%);
     z-index: 2;
-    opacity: 0.9;
-    padding: 6px 12px;
+    background-color: #f0a500; /* Color similar to the one in the image */
+    color: #fff;
+    border: none;
+    padding: 8px 15px;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+
+.customize-btn i {
+    margin-left: 5px; /* Icon spacing */
+}
+
+.customize-btn:hover {
+    background-color: #e08c00; /* Darker shade for hover effect */
+    transition: background-color 0.3s ease;
 }
 
 
@@ -498,16 +513,16 @@ form-check-input addon-option{
                             </div>
                         </div>
                     </div> -->
-              <div class="col-md-4 mb-4">
+  <div class="col-md-4 mb-4">
     <div class="card menu-card position-relative">
         <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}"
             onerror="this.src='/static/placeholder.jpg';" loading="lazy">
 
         <!-- Customize Button on Image -->
-        <button class="btn btn-primary customize-btn"
+        <button class="btn customize-btn"
             data-bs-toggle="modal" data-bs-target="#itemModal"
             onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
-            Customize
+            Customize <i class="bi bi-caret-right-fill"></i>
         </button>
 
         <div class="card-body">
@@ -517,6 +532,7 @@ form-check-input addon-option{
     </div>
 </div>
 
+
               
                 {% endfor %}
             </div>