Trying to change css on a download button

Using Streamlit
1

Hello,

I am pretty new to streamlit, but I am attempting to make a Linktree like clone. I currently have a CSS format I like for my buttons:

st.markdown(
f’<a href=“{resume}”’
f’ style=“display: inline-block;’
f’ padding: 5px 20px;’
f’ background-color: #4A55A2;’
f’ color: #C5DFF8;’
f’ width: 300px;’
f’ height: 35px;’
f’ text-align: center;’
f’ text-decoration: none;’
f’ font-size: 16px; ’
f’border-radius: 8px;’
f’”>Resume',
unsafe_allow_html=True
)

I am trying to get this format into my download button:

with open(“files/Resume.pdf”, “rb”) as pdf_file:
PDFbyte = pdf_file.read()

st.download_button(label=“Resume”,
data=PDFbyte,
file_name=Resume.pdf",
mime=‘application/octet-stream’)

I can’t seem to understand how to do this, alll my attempts throw an error or just keep the button size default. Any help is appreciated!

2

Hey @fc_logical, Thanks for posting…

I can do this for you…
Just run your app and inspect the button you want to change.
Check for the id name or class it is having .
Like in my case it is like…

image

So, to change the css of this box , i can write it like this…

    st.markdown(f"""
      <style>
      [class="css-629wbf edgvbvh10"]{{
            display: inline-block;
            padding: 5px 20px;
            background-color: #4A55A2;’
            color: #C5DFF8;
            width: 300px;
            height: 35px;
            text-align: center;
            text-decoration: none;
            font-size: 16px; 
            border-radius: 8px;’
      }}
      </style>
    """
    , unsafe_allow_html=True)

So, just use the command st.download_button and inspect it and get the element class and write the above custom css.

I hope your problem is solved now…:smiling_face:

3

@ilovetensor This worked for me! Thank you so much!

1 Like
4

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