St.link_button style is not correctly rendered

Deployment
,
1

Hi,

Even I pass the type “primary” keyword for the link_button, it uses different style (not absolute size and blue color like in “login” and “download leaflet”)

    with c1:
        if st.button("Login", on_click=attempt_login, key="login_button_login_page", type="primary"):
            pass  # Button click is handled in the callback function
    ...
    
    
    with cm:
        st.write("Do you want to know more about TalkToAlba? Visit our site or fownload our leaflet using the button below.")
        st.link_button("Visit the main site", "https://www.talktoalba.com", type="primary")
...
        file_download = "TalkToAlba_Leaflet.pdf"
        full_file_path = ...
        with open(full_file_path, "rb") as file:
            btn = st.download_button(
                label="Download leaflet",
                data=file,
                file_name="TalkToAlba_Leaflet.pdf",
                mime="application/pdf",
                type="primary"
            )

image

I believe my custom css is good

button[kind="primary"] {
    background-color: rgb(162, 194, 201);
    width: 200px;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.25);
    border: none;
    transition: color 1s ease, background-color 1s ease;  /* Smooth transition for color change */
    color: black;
}

button[kind="primary"]:hover {
    background-color: rgb(162, 194, 201);
    color: white; /* Text color changes to white on hover */
}

button[kind="primary"]:active {
    background-color: rgb(162, 194, 201);
    color: white; /* Maintain the text color as white */
}

button[kind="secondary"] {
    background-color:  rgb(162, 194, 201);
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.25);
    border: none;
    padding: 0.375rem 0.75rem; /* Adjust the padding as needed */
    font-size: 1rem; /* Adjust font size as needed */
    line-height: 1.5;
    border-radius: 0.375rem; /* Adjust for rounded corners if desired */
    transition: color 1s ease, background-color 1s ease; /* Smooth transition for color change */
    color: black; /* Text color */
}

button[kind="secondary"]:hover {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0); /* Maintain the text color as white */
}

button[kind="secondary"]:active {
    background-color: rgb(162, 194, 201);
    color: white; /* Maintain the text color as white */
}

How can I solve it?

2

for the link_button, it look like the css is not the same, it’s not a ‘button’.
For me, this work remove the “button”:

[kind="primary"] {
    background-color: rgb(162, 194, 201);
    width: 200px;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.25);
    border: none;
    transition: color 1s ease, background-color 1s ease;  /* Smooth transition for color change */
    color: black;
}
...

You can just edit just the button_link with a[kind="primary"]

1 Like
3

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