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:
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…
@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.
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:
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?
Thanks for stopping by! We use cookies to help us understand how you interact with our website.
By clicking “Accept all”, you consent to our use of cookies. For more information, please see our privacy policy.
Cookie settings
Strictly necessary cookies
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
Performance cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
Functional cookies
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
Targeting cookies
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.