Custom customization of the button is not working

[sdrsrs]

I have tried two different iterations of customizing width of a specific button. Both iterations don’t seem to work. If the customization is applied without specifying a button, it applies to the whole page successfully, but that is not the goal. Following are the 2 different iterations, both which don’t seem to work.

# Custom CSS to inject contained in a <style> tag
button_custom_css = """
    <style>
        div[data-testid="stButton"][id="unique-clear-button"] > button {
            width: 150px;  /* Set your desired width */
        }
    </style>
"""

# Add custom CSS to the top of your app (only needs to be done once)
st.markdown(button_custom_css, unsafe_allow_html=True)

# Your existing button creation code
columns = st.columns(7)
with columns[3]:
    clicked = st.button("clear", key="unique-clear-button")

    if clicked:
        modal.close()
        st.session_state['button_clicked'] = True

and

# Custom CSS to inject contained in a <style> tag
button_custom_css = """
    <style>
        /* Target the button with the specific key */
        button[data-baseweb="button"][key="unique-clear-button"] {
            width: 150px; /* Set your desired width */
        }
    </style>
"""

# Inject custom CSS
st.markdown(button_custom_css, unsafe_allow_html=True)

If is applied without targeting a specific button, it works. Please advise. Thanks.

App is running locally.
Python 3.11, Streamlit, version 1.29.0

[dataprofessor]

Hi @sdrsrs

I also encountered a similar issue when building the buttons used in the State of LLM app (I wanted the buttons to center and CSS customization of `data-testid=“stButton”] applies a global change to all buttons on the page (not the desired goal, similar to yours).

Thus, I’ve created a new button for this:

def redirect_button(url: str, text: str= None, color="#F63366"):
    st.markdown(
    f'''
    <a href="{url}" target="_self">
        <div style="
            display: inline-block;
            padding: 0.5em 0.75em;
            color: #FFFFFF;
            background-color: {color};
            border-radius: 3px;
            text-decoration: none;">
            {text}
        </div>
    </a>
    ''',
    unsafe_allow_html=True)

The button redirects user to a specific anchor on the same app page using this custom function:

redirect_button("#top-models", "Go to Top models")

Here’s a screenshot of the red buttons created here:

Hope this helps!