How to build an unique button in streamlit web program?

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.

3 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?

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

Did you get any solution??

Is there any possibility to do that?