Button css for streamlit

Using Streamlit
1

how to distinguish two button for applying css attributes

2

Hi, could you add more context to the question but as far as I can make sense of it you can assign different classes to each button and then apply the respective CSS rules. This way you can distinguish b/w them individually.

st.markdown("<style>.button1 { /* Button 1 CSS attributes*/ }</style>", unsafe_allow_html=True)
button1_clicked = st.button("Button 1")
st.markdown("<style>.button2 { /* Button 2 CSS attributes*/ }</style>", unsafe_allow_html=True)
button2_clicked = st.button("Button 2")

Let me know if this works

3

Thank you for the reply @Akshat_Punia .

This way I tried but it did not work.

4

If you only need 2 type of buttons, you can use the primary and secondary button types in Streamlit:

st.button("Seconday button")  # st.button default type is secondary
st.button("Primary button", type="primary")

and the, use this CSS selectors to modify their style:

button[kind="primary"] {
  background-color: orange;
}

button[kind="seondary"] {
    background-color: purple;
}

If you need more than 2, you have to use a custom button but you’ll lose every benefit from the default ones.

Hope this would help! :smile:

2 Likes
5

I tried this one.

But can i get the list of CSS class of all components of streamlit(auto generated class)?

6

@keshav_dk, I used the inspector to find out almost every class of the auto-generated components

1 Like
7

Here is a post about styling buttons based on the order they are rendered:

9

I’ve come up with a hack that enables you to apply CSS styling to any particular button within your Streamlit app.
First, ensure you apply styling to your Streamlit app at the beginning:

st.markdown("""
<style>.element-container:has(#button-after) + div button {
 /* APPLY YOUR STYLING HERE */
 }</style>""", unsafe_allow_html=True)

Then, anywhere in your code, you can use the following to apply the styling to a specific button:

st.markdown('<span id="button-after"></span>', unsafe_allow_html=True)
st.button('My Button')

This hack essentially inserts an empty <span> element with the id button-after before the button you want to style, and the CSS rule selects that button and applies the specified styling to it.
This could be used to style any element and you could make use of id selectors or class selectors depending on your use case.

6 Likes
10 
st.markdown(
    """
    <style>
    .element-container:has(style){
        display: none;
    }
    #button-after {
        display: none;
    }
    .element-container:has(#button-after) {
        display: none;
    }
    .element-container:has(#button-after) + div button {
        background-color: orange;
        }
    </style>
    """,
    unsafe_allow_html=True,
)
st.button("button1")
st.markdown('<span id="button-after"></span>', unsafe_allow_html=True)
st.button("My Button")
st.button("button2")

Added optimization of spacing based on @Ali_Attieh’s answer.

1 Like
11

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.