Differenet css to different button

Using Streamlit
1

Hi @blackary

I want to apply custom CSS to a Streamlit button. My current code works, but it applies the same styling to every button on the page. I want to style different buttons differently. How can I achieve this? Thanks

## Add custom CSS for the button
st.markdown(
    """
    <style>
    .stButton button {
        font-size: 16px;
        font-weight: bold; /* Bold text */
        color: #FFFFFF;
        background-color: #0e3558; /* Dark blue color */
        border: none;
        border-radius: 25px; /* Rounded corners */
        padding: 10px 20px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }
    .stButton button:hover {
        background-color: #47d7ac; /* Green background on hover */
        color: #FFFFFF; /* Keep text white on hover */
        transform: scale(1.05); /* Slightly enlarge on hover */
    }
    </style>
    """,
    unsafe_allow_html=True,
  )


if st.button("Primary Button"):
    st.write("Primary button clicked!")

if st.button("Secondary Button"):
    st.write("Secondary button clicked!")
2

When you assign a key to a widget, the key will show up in the DOM with and st-key- prefix (as of version 1.41.0).

For st.button("My button", key="my_key"), use:

.st-key-my_key .stButton button {
}