How to build an unique button in streamlit web program?

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.

image
image

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

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 :slight_smile:
  • 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’ :balloon:
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.

check this url to get what you want:
https://www.runoob.com/css/css-positioning.html#position-fixed

I couldn’t manage to get it fixed. I wanted to center align the button position so that it should appear the same in the shorter browser screen too.

@rafisics
I got a new idea to meet your requirement

import streamlit as st
st.markdown(""" div.stButton > button:first-child {
background-color: #00cc00;color:white;font-size:20px;height:3em;width:50%;border-radius:10px 10px 10px 10px;
}
“”", unsafe_allow_html=True)

col1,col2,col3=st.beta_columns([0.3,1.2,0.3])
with col1:
st.empty()
with col2:
if st.button(“the notice you want to show”):
st.write(“content you want to show”)
with col3:
st.empty()

we add st.beta_columns() function to make it come true.

1 Like

This worked like a charm! Thank you!

I used this css button generator and placed the style code inside your code above and it looks great.

4 Likes

nice idea, I will use this on next project.

@BeyondMyself @rafisics

Hello, I want to customize buttons with different styles.
I am already using a local_css method to customize buttons in a page (following a particular a style of customization).
using this css:

body {
    color: #fff;
    background-color: #11A27B;
    /* font-size: 40px; */
}

.stButton>button{
    color: #11A27B;
    box-sizing: 5%;
    height: 5em;
    width: 5em;
    font-size:50px;
    border: 7px solid;
    border-radius: 10px;
    padding: 30px;
}

.stTextInput>div>div>input {
    color: #000000;
}

.fullScreenFrame > div {
    display: flex;
    justify-content: center;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

and I call this method

def local_css(file_name):
    with open(file_name) as f:
        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)

Now the problem is, that I have a second page where I have new buttons and I want to customize each button with different styles, shape, etc. So what I did was I created a new css file and changed few properties and called the load_css method again. But now what happened is that properties of the “old button” changed as well (which is obvious). Because .stButton works globally I guess.

How can I uniquely define and set properties for each individual buttons? Is there a way?

1 Like