# St.link\_button style is not correctly rendered

**URL:** <https://discuss.streamlit.io/t/st-link-button-style-is-not-correctly-rendered/79238>\
**Category:** Deployment\
**Tags:** button, debugging\
**Created:** [August 21, 2024, 8:42am UTC](https://discuss.streamlit.io/t/st-link-button-style-is-not-correctly-rendered/79238 "2024-08-21T08:42:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![csipapicsa](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/csipapicsa/32/47944_2.png) [@csipapicsa](https://discuss.streamlit.io/u/csipapicsa)\
**Post date:** [August 21, 2024, 8:42am UTC](https://discuss.streamlit.io/t/st-link-button-style-is-not-correctly-rendered/79238/1 "2024-08-21T08:42:04Z")

</div>

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”)

```auto
    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](https://global.discourse-cdn.com/streamlit/original/3X/8/6/8656b87f6b28a4a8fb53ba838f7ce196600df07f.png)

I believe my custom css is good

```auto
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?

---

<div class="post-metadata">

**Author:** ![Faltawer](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/faltawer/32/46117_2.png) [@Faltawer](https://discuss.streamlit.io/u/Faltawer)\
**Post date:** [August 21, 2024, 8:59am UTC](https://discuss.streamlit.io/t/st-link-button-style-is-not-correctly-rendered/79238/2 "2024-08-21T08:59:34Z")

</div>

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”:

```auto
[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"]`

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/streamlit/original/3X/c/f/cf4c2ee0d938358f82448c5fe4b9c3c91d7ce19c.svg) [@system](https://discuss.streamlit.io/u/system)\
**Post date:** [August 23, 2024, 8:59am UTC](https://discuss.streamlit.io/t/st-link-button-style-is-not-correctly-rendered/79238/3 "2024-08-23T08:59:40Z")

</div>

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