Update app.py

app.py

@@ -44,14 +44,22 @@ st.markdown("""
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         animation: slideInUp 0.5s ease-in-out;
-        border: none;
-        cursor: pointer;
     }
     .team-card:hover {
         transform: scale(1.1) rotate(2deg);
         box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
         background: linear-gradient(45deg, #e74c3c, #f1c40f);
     }
+    .team-button {
+        background: none;
+        border: none;
+        color: white;
+        font-size: 1.2rem;
+        font-weight: bold;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+    }
     .stats-container {
         background: rgba(255, 255, 255, 0.1);
         border-radius: 15px;
@@ -136,35 +144,21 @@ st.markdown('<div class="team-container">', unsafe_allow_html=True)
 row1 = st.columns(5)
 for i, t in enumerate(teams[:5]):
     with row1[i]:
-        # Use a custom HTML button with the team-card class
-        button_html = f"""
-        <form>
-            <button class="team-card" type="submit" name="team_button" value="{t}">
-                {t}
-            </button>
-        </form>
-        """
-        st.markdown(button_html, unsafe_allow_html=True)
-        # Check if this button was clicked
-        if st.session_state.get('team_button') == t:
+        # Wrap the button in a styled div with the team-card class
+        st.markdown(f'<div class="team-card">', unsafe_allow_html=True)
+        if st.button(t, key=f"team_{t}_row1", help=f"Select {t}"):
             st.session_state['selected_team'] = t
+        st.markdown('</div>', unsafe_allow_html=True)
 
 # Second row (5 teams)
 row2 = st.columns(5)
 for i, t in enumerate(teams[5:10]):
     with row2[i]:
-        # Use a custom HTML button with the team-card class
-        button_html = f"""
-        <form>
-            <button class="team-card" type="submit" name="team_button" value="{t}">
-                {t}
-            </button>
-        </form>
-        """
-        st.markdown(button_html, unsafe_allow_html=True)
-        # Check if this button was clicked
-        if st.session_state.get('team_button') == t:
+        # Wrap the button in a styled div with the team-card class
+        st.markdown(f'<div class="team-card">', unsafe_allow_html=True)
+        if st.button(t, key=f"team_{t}_row2", help=f"Select {t}"):
             st.session_state['selected_team'] = t
+        st.markdown('</div>', unsafe_allow_html=True)
 
 st.markdown('</div>', unsafe_allow_html=True)