Update app.py

app.py

@@ -43,12 +43,14 @@ body {
     text-align: center;
 }
 .play-btn {
-    background-color: #FF5722 !important;
-    color: white;
-    border-radius: 50px;
-    width: 100px;
-    height: 40px;
-    font-size: 14px;
+    background-color: transparent;
+    border: none;
+    font-size: 24px;
+    color: #FF5722;
+    cursor: pointer;
+}
+.play-btn:hover {
+    color: #ff8a50;
 }
 .playing {
     animation: pulse 1s infinite alternate;
@@ -70,8 +72,11 @@ with gr.Blocks(css=custom_css) as demo:
                 if i + j < len(voices):
                     voice = voices[i + j]
                     with gr.Column():
-                        audio = gr.Audio(play_audio(voice["file"]), autoplay=False, elem_id=voice["name"])
-                        btn = gr.Button(f"▶ {voice['name']}", elem_classes="play-btn")
+                        # Hidden Audio Component
+                        audio = gr.Audio(play_audio(voice["file"]), autoplay=False, elem_id=voice["name"], visible=False)
+                        # Play Button with FontAwesome Icon
+                        btn = gr.Button("▶", elem_classes="play-btn")
+                        # Voice Info
                         info = gr.Markdown(f"**{voice['name']}**<br>{voice['gender']} | {voice['country']}")
                         
                         def start_animation():