How to build an unique button in streamlit web program?

🎈 Using Streamlit
21

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.

22

@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
23

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
24

nice idea, I will use this on next project.

25

@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
26

Hey guys, try the code below to get your buttons on track. This will centralize your buttons too! Play around to get your desired button style.

import streamlit as st

m = st.markdown("""
<style>
div.stButton > button:first-child {
    background-color: #ce1126;
    color: white;
    height: 3em;
    width: 12em;
    border-radius:10px;
    border:3px solid #000000;
    font-size:20px;
    font-weight: bold;
    margin: auto;
    display: block;
}

div.stButton > button:hover {
	background:linear-gradient(to bottom, #ce1126 5%, #ff5a5a 100%);
	background-color:#ce1126;
}

div.stButton > button:active {
	position:relative;
	top:3px;
}

</style>""", unsafe_allow_html=True)

b = st.button("Button 1")


st.markdown('<p></p>', unsafe_allow_html = True)
st.markdown('<p></p>', unsafe_allow_html = True)
st.markdown('<p></p>', unsafe_allow_html = True)

c = st .button("Button 2")
2 Likes
27

Did you get any solution??

28

Is there any possibility to do that?

29

Hi! This is now possible thanks to stylable containers
just pip install streamlit_extras
then use this code

from streamlit_extras.stylable_container import stylable_container
with stylable_container(key="my_unique_button",css_styles="""
{
    [data-testid="baseButton-secondary"] {
        background-color: red;
    }
}
""",):
    st.button("button", on_click=foo)

Works for everything, not only buttons.