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 {
}
1 Like
3

thanks, it working :blush:

4

but 1 quick follow question , but what if i want to apply same css to 2 button and other css to 2 other buttton.

because currently i am getting error

There are multiple elements with the same key='logout' . To fix this, please make sure that the key argument is unique for each element you create.

5

In a Streamlit app, the key must be unique because it’s tied to the value/state of the element.

If you want to apply CSS to multiple elements, you can:

  1. List out the multiple classes as a comma-separated list in your CSS:
    .st-key-my_key .stButton button, .st-key-my_other_key .stButton button{
}
  2. Use a substring selector:
    import streamlit as st

CSS = """
div[class*="st-key-group1"] .stButton button {
    color:blue
}
div[class*="st-key-group2"] .stButton button {
    color:red
}
"""
st.html(f"<style>{CSS}</style>")

st.button("Group1-a", key="group1-a")
st.button("Group1-b", key="group1-b")
st.button("Group1-c", key="group1-c")
st.button("Group2-a", key="group2-a")
st.button("Group2-b", key="group2-b")
st.button("Group2-c", key="group2-c")
1 Like
6

thanks :blush: