Update style.css

style.css

@@ -227,9 +227,9 @@ body {
     justify-content: space-around;
 }
 
+/* Mood Buttons */
 .mood-btn {
     font-weight: 600;
-    color: white;
     border: none;
     border-radius: 14px;
     padding: 14px 20px;
@@ -242,8 +242,20 @@ body {
     flex: 1 1 20%;
     max-width: 180px;
     text-align: center;
+    /* Remove default background/color here */
+    /* color will be inherited from inline style (white) */
+}
+
+.mood-btn:hover {
+    transform: translateY(-3px) scale(1.03);
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
 }
 
+.mood-btn:active {
+    transform: translateY(0);
+}
+
+
 .mood-heading {
     text-align: center;
     font-weight: 700;