From b4d954b8b898954d08a254cbc14e0f1a125ec68b Mon Sep 17 00:00:00 2001
From: Subashree-selvaraj <subashreevjc@gmail.com>
Date: Fri, 11 Oct 2024 11:53:17 +0530
Subject: [PATCH] solved btn hovering issues

---
 style.css | 37 ++++++++++++++++++++++++++++---------
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/style.css b/style.css
index 642a1288..c6385d19 100644
--- a/style.css
+++ b/style.css
@@ -68,10 +68,14 @@ button[type="submit"] {
     border: none;
     border-radius: 5px;
     cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.3s ease; /* Add transition */
 }
+    
+
 
 button[type="submit"]:hover {
     background-color: #444;
+    transform: scale(1.1);
 }
 
 
@@ -348,7 +352,8 @@ button {
 }
 #cart-btn
 {
-    padding: 12px 14px;
+   
+    margin-left: 20px;
 }
 
 button img {
@@ -360,25 +365,39 @@ button:hover img {
     display: block;
 }
 
-#cart-btn:hover
-{
-    width: 160px;
+#cart-btn,
+#buy-btn {
+    width: 150px;
+    height: 45px;
+    padding: 10px 0px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     display: flex;
+    justify-content: center;
     align-items: center;
-    justify-content: space-between;
-
+    padding: 10px;
+    white-space: nowrap;
+    flex-grow: 1;
 }
-#buy-btn:hover
-{
+#buy-btn:hover,
+#cart-btn:hover {
     width: 160px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 10px;
+    transform: scale(1.1);
+    transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out, transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
 }
 .btn-section
 {   display: inline-flex;
     gap: 15px;
+    
+   
 }
 
 .col-1::after {