How to create style-customed st.button with custom text

Using Streamlit
, ,
1

I tried to combine the button with customed text. But the markdown only changed the style of button TT, these are the effect and code：

image
image1236×539 6.19 KB

the text of button isnt changed:

Define the keypad layout

            keypad = [
                ['1', '2', '3'],
                ['4', '5', '6'],
                ['7', '8', '9'],
                ['0', '删除', '清除']
            ]

            # Apply global CSS styling for buttons
            st.markdown("""
                <style>
                /* Target buttons inside columns */
                div[data-testid="stHorizontalBlock"] button {
                    font-size: 48px !important;  /* Adjust font size */
                    font-weight: bold !important;  /* Bold text */
                    height: 80px !important;  /* Button height */
                    width: 80px !important;  /* Button width */
                    padding: 0px !important;  /* Padding */
                    display: flex;  /* Center text */
                    align-items: center;  /* Center text vertically */
                    justify-content: center;  /* Center text horizontally */
                }
                </style>
                """, unsafe_allow_html=True)

            # Display the keypad
            for row in keypad:
                cols = st.columns(3)
                for btn, col in zip(row, cols):
                    if col.button(btn, key=f"btn_{btn}", use_container_width=False):
                        if btn == '删除':
                            st.session_state.race_number = st.session_state.race_number[:-1]

I cant make it out. How to change the size of text and make it run well?

streamlit == 1.41.1
python == 3.11