ok

src/components/MusicPlayer.css

@@ -302,18 +302,19 @@
 .search-button {
   display: block;
   margin: 1rem auto 0;
-
   flex-grow: 1;
   border: none;
   border-radius: 25px;
   padding: 10px 15px;
   font-size: 16px;
   outline: none;
-  background-color: #f4efe6;
+  background-color: #f4efe6; /* Original color */
   color: black;
   font-weight: bold;
+  transition: background-color 1s ease; /* Smoothly transition background color over 1 second */
 }
 
-.search-button:hover {
-  background-color: #0056b3;
+.search-button.clicked {
+  background-color: #d0c7b3; /* The color when clicked */
 }
+

src/components/MusicPlayer.js

@@ -27,6 +27,8 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
   const [subtitleBG, setSubtitleBG] = useState("white");
   const [backgroundImage, setBackgroundImage] = useState("");
 
+  const [clicked, setClicked] = useState(false);
+
 
   const [canvaz, setCanvaz] = useState('');
   const [videoSrc, setVideoSrc] = useState('');
@@ -371,9 +373,16 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
   }, [currentSong]); // Run effect when currentSong changes
 
   const handleButtonClick = () => {
+    setClicked(true);
+
     if (inputRef.current) {
       inputRef.current.focus(); // Focus the input when the button is clicked
     }
+
+    // After 1 second, remove the "clicked" class to let the color gradually return to the original
+    setTimeout(() => {
+      setClicked(false);
+    }, 1000); // 1 second timeout (same as the CSS transition duration)
   };
 
   return (
@@ -491,8 +500,12 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
                 <div className="middle-text">
                   <span className="bold-text">Antrian kosong</span><br />
                   <span className="normal-text">Pilih musikmu</span>
-                <button className="search-button" onClick={handleButtonClick}>Cari musik</button>
-
+                  <button
+                    className={`search-button ${clicked ? 'clicked' : ''}`}
+                    onClick={handleButtonClick}
+                  >
+                    Cari musik
+                  </button>
                 </div>
               )}
               {songName != "" &&
@@ -525,7 +538,12 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
 
                 <div className="middle-text">
                   <span className="normal-text">Tambahkan musikmu</span>
-                <button className="search-button" onClick={handleButtonClick}>Cari musik</button>
+                  <button
+                    className={`search-button ${clicked ? 'clicked' : ''}`}
+                    onClick={handleButtonClick}
+                  >
+                    Cari musik
+                  </button>
                 </div>
               )}
             </div>