Enhanced Ice-Cream Cards Animations & Button Functionality!

style.css

@@ -689,6 +689,7 @@ button:hover {
   border-radius: 40px;
   cursor: pointer;
   transition: background-color 0.3s ease;
+  background: linear-gradient(to bottom right, #d3ad7f, #fe6769);
 }
 
 .filter-box #apply-filter:hover {
@@ -699,6 +700,7 @@ button:hover {
 .filter-box #remove-filter:hover {
   background-color: red;
   color:#ffffff;
+
 }
 
 /* filter box styles end */
@@ -786,6 +788,7 @@ button:hover {
   text-align: center;
   border: var(--text-color);
   align-items: center;
+  background: linear-gradient(to bottom right, #d3ad7f, #fe6769);
 }
 
 .menu .box-container .box h3 {
@@ -811,6 +814,12 @@ button:hover {
   color: var(--text-color);
 }
 
+.menu .box-container .box:hover {
+  scale: 1.05;
+  transition: 1s;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.19);
+}
+
 .menu img {
   width: 220px;
   height: 220px;
@@ -863,25 +872,82 @@ button:hover {
   transition-duration: 0.6s;
 }
 
+#pro-name {
+  color: #4e1a22;
+}
+
 #inbox {
-  background-color: #fff8e7;
-  border: 0.5px solid #c69861;
-  color: #d3ad7f;
-  width: fit-content;
-  transition: background-color 0.3s ease, color 0.3s ease,
-    border-color 0.3s ease;
+  --border-radius: 10px;
+  --border-width: 2px;
+  appearance: none;
+  position: relative;
+  /* padding: 1em 2em; */
+  padding: 10px;
+  border: 0;
+  /* background-color: #121212; */
+  font-family: "Roboto", Arial, "Segoe UI", sans-serif;
+  /* font-size: 18px; */
+  font-weight: 500;
+  color: #000;
+  z-index: 2;
 }
 
-#pro-name {
-  color: #4e1a22;
+#inbox::after {
+  --m-i: linear-gradient(#000, #000);
+  --m-o: content-box, padding-box;
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: var(--border-width);
+  border-radius: var(--border-radius);
+  background-image: conic-gradient(
+         #488cfb,
+         #29dbbc,
+         #ddf505,
+         #ff9f0e,
+         #e440bb,
+         #655adc,
+         #488cfb
+     );
+  -webkit-mask-image: var(--m-i), var(--m-i);
+  mask-image: var(--m-i), var(--m-i);
+  -webkit-mask-origin: var(--m-o);
+  mask-origin: var(--m-o);
+  -webkit-mask-clip: var(--m-o);
+  mask-composite: exclude;
+  -webkit-mask-composite: destination-out;
+  filter: hue-rotate(0);
+  /* animation: rotate-hue linear 500ms infinite; */
+  animation: rotate-hue linear 1000ms infinite;
+  animation-play-state: paused;
+} 
+
+#inbox:hover::after {
+  animation-play-state: running;
+}
+
+@keyframes rotate-hue {
+  to {
+   filter: hue-rotate(1turn);
+  }
 }
 
-#inbox:hover {
-  /* background-color: #d3ad7f; Darkens background on hover */
-  color: #ca7c1d; /* Lightens text color on hover */
-  border-color: #b89b57; /* Subtle change in border color */
-  background-color: beige;
+#inbox::after {
+  box-sizing: border-box;
+}
+
+#inbox:active {
+  --border-width: 5px;
 }
+
+#inbox-site {
+  margin: 10px;
+  padding: 10px 30px;
+}
+
 /*review section style contributed*/
 /* Review Section Adjusted Styles */
 .container {
@@ -2188,4 +2254,4 @@ form h3{
 }
 #backToTop:hover {
     background-color: #0056b3; /* Darken on hover */
-}
+}