From the brief introduction of st.button component, we can not found a parameter to change the text color, background color and appearance of button.
Is there any solution can help us to set an unique button?
1 Like
Guess this can be achieved using the manner described in the issue where you referenced this question.
Use the inspector in you web browser to get the data-testid and write css to overwrite the styling of the object.
1 Like
Thank you.
I tried to overwrite the code of button, but failed.
@maarten-betman @andfanilo
I found the code in style.css, what ever you overwrite, the button style can not change
is there any other code we should add or overwrite?
.stButton>button {
color: #4F8BF9;
border-radius: 20%;
backgroud-color: #00ff00;
height: 3em;
width: 3em;
}
The class name you are using is of the wrapping div. Since the class name of the button is dynamic (or at least it seems), you need the first button child in the div.
So it will probably me something more in the line of:
div.stButton > button:first-child {
color: #4F8BF9;
border-radius: 20%;
backgroud-color: #00ff00;
height: 3em;
width: 3em;
}
But i’m not so fluent in CSS.
Also don’t forget to add the style to your app using st.markdown and the style tag.
Ah seems you were trying to access the button inside the div. Hopefully my snip brings you a bit further.
I am deciding to use st.beta_container to replace st.button until st.button have more parameter can define its appearance.
thank you, my friend.
Works for me by the way. I’ve added the style element in the inspector using Firefox.
So if you give it another try you might figure it out.
can you show me the complete code of button, its css code and their location introduction in program?
Quick and dirty:
import streamlit as st
m = st.markdown("""
<style>
div.stButton > button:first-child {
background-color: rgb(204, 49, 49);
}
</style>""", unsafe_allow_html=True)
b = st.button("test")
More elegant solution is as @andfanilo did by reading the css file and inserting the contents into the style tag.
3 Likes
Well down, this way works.
for a better appearance, we can add other details as below:
import streamlit as st
st.markdown(""" div.stButton > button:first-child {
background-color: #00cc00;color:white;font-size:20px;height:3em;width:30em;border-radius:10px 10px 10px 10px;
}
“”", unsafe_allow_html=True)
if st.button(“the notice you want to show”):
st.write(“content you want to show”)
1 Like
There’s no accounting for taste 
this feature is very useful, it makes our web app become more beautiful.
2 Likes
Eheh, well you got the choice between:
- becoming a master of CSS selections to pinpoint the exact button/column you want to pimp, using nth-child selection
- building a button custom component to call whenever you need.
CSS selection is faster to do but one day a Streamlit upgrade or you updating your app could break the HTML structure and the CSS selector. Building a custom button with Streamlit Component linking would be the “safer” solution but I totally understand that it’s a more involved solution with more JS tooling, and if you’re only in the prototype phase be too time consuming if you’re not used to JS…
Happy Streamlitin’ 
Fanilo
1 Like
@andfanilo I hope we can see that st.button can have its own parameters to set its appearance soon.
1 Like
Is it possible to center align the button position horizontally using CSS?
you can add these to st.markdown:
position:relative;left:50%;
It’s not providing my desired output. It’s going too left and not properly aligns when the screen is minimized.