This is a more clean way to style any button in 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.