How to change the backgorund color of button widget

[rafisics]

I like to know how I can change the background color of the Streamlit button widget.
In this Github issue (Change Background color of Button widget · Issue #406 · streamlit/streamlit · GitHub), it’s being told to use markdown. But I didn’t understand it. Can anyone kindly elaborate on how I can do it?
For example:

if st.button('Click here') is True:
       st.write('Great')

By default, the button border is highlighted when I hover over it. But I want to fill the button background with the custom primaryColor of the Streamlit theme.

[maarten-betman]

HI @rafisics,

The st.markdown hack is described in this thread.

Note that this could easily break in future releases of streamlit.

[BeyondMyself]

@rafisics
you can use this code and give more setting:

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”)

[rafisics]

I like to set up the button’s background color in such a way that it changes automatically according to the change in the theme color.

For example, I have set up theme color in config.toml as:

[theme]
primaryColor="#FF7903"
backgroundColor="#0E1117"
secondaryBackgroundColor="#31333F"
textColor="#FAFAFA"
font="sans serif"

Now is it possible to call the primaryColor in the st.markdown of the button automatically so that whenever I change the color code in the theme, the button color will change too? In that case, what should I write in the code?

[BeyondMyself]

you can define the color of button’s background-color before be clicked and after be clicked:
just add this css code to my previous code:

.css-2trqyj:focus:not(:active) {
border-color: #ffffff;
box-shadow: none;
color: #ffffff;
background-color: #0066cc;
}
.css-2trqyj:focus:(:active) {
border-color: #ffffff;
box-shadow: none;
color: #ffffff;
background-color: #0066cc;
}
.css-2trqyj:focus:active){
background-color: #0066cc;
border-color: #ffffff;
box-shadow: none;
color: #ffffff;
background-color: #0066cc;
}

[rafisics]

Like this following?

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;
}
.css-2trqyj:focus:not(:active) {
border-color: #ffffff;
box-shadow: none;
color: #ffffff;
background-color: #0066cc;
}
.css-2trqyj:focus:(:active) {
border-color: #ffffff;
box-shadow: none;
color: #ffffff;
background-color: #0066cc;
}
.css-2trqyj:focus:active){
background-color: #0066cc;
border-color: #ffffff;
box-shadow: none;
color: #ffffff;
background-color: #0066cc;
}
""", unsafe_allow_html=True)

[BeyondMyself]

yes, change the color number as your plan and run program in browser to see the result.

[rafisics]

Yes, in that way, I can customize everything manually in my .py file. But what I wanted is to connect/call the color codes that are set in my config.toml file.

@rafisics

Now is it possible to call the theme’s primaryColor in the st.markdown of the button automatically so that whenever I change the color codes in the theme, the button color will change accordingly? In that case, what should I write in the code?

[BeyondMyself]

Please wait for the answer of professional support team in community.

[maarten-betman]

@rafisics

.css-2trqyj

This looks like an automatically generated classname. This will probably break quite fast.

The css selector div.stButton > button:first-child is a bit more robust as the class name stButton is set in the react code. This is of course not a garantee that it won’t break in new streamlit releases as it’s a hack to change the color of a bottom.

You can read the config.toml file with toml python package and insert the color codes into the css string you enter in the markdown object.

[rafisics]

@maarten-betman

You can read the config.toml file with toml python package and insert the color codes into the css string you enter in the markdown object.

This is what I have come up with:

import streamlit as st
import toml
primaryColor = toml.load(".streamlit/config.toml")['theme']['primaryColor']
s = f"""
<style>
div.stButton > button:first-child {{ border: 5px solid {primaryColor}; border-radius:20px 20px 20px 20px; }}
<style>
"""
st.markdown(s, unsafe_allow_html=True)

Is there any better/effective way to do it?

[maarten-betman]

Looks good to me

[Marisa_Smith]

Hey @rafisics,

If your looking to access the colours from your config file in your Streamlit app code you can easily do this with st.get_option

In fact, I actually cover this in the Theming tutorial on Youtube (checkout 5:32 for the exact time on when I go over this):

How to build custom themes for your Streamlit app

[rafisics]

@Marisa_Smith Thanks a lot.
I have accessed and used the config color in the following way now:

import streamlit as st
primaryColor = st.get_option("theme.primaryColor")
s = f"""
<style>
div.stButton > button:first-child {{ border: 5px solid {primaryColor}; border-radius:20px 20px 20px 20px; }}
<style>
"""
st.markdown(s, unsafe_allow_html=True)

Does there exist any better way to use the colors except using string formatting?

[BeyondMyself]

I can not open the video url, do we have a text intruction for this, thank you.

[Marisa_Smith]

Hey @rafisics,

No that is currently the best way to have full control over the button appearance and behaviour.

[Marisa_Smith]

Hey,

Yes here is the code I used in the tutorial:

primary_clr = st.get_option("theme.primaryColor")
txt_clr = st.get_option("theme.textColor")

Also, not sure why the YouTube link isn’t playing for you, but here are direct links to the theming tutorial and our general YouTube channel.

We are trying to create a repository of videos that would be helpful to the community, so if you have any suggestions please add them to this thread:

Streamlit Shorts: Core Functionality Series

Hey Community , We’re excited to announce a new media format called Streamlit Shorts - these will be a series of short (~90 seconds or less) YouTube videos that are designed to make developing, designing and most importantly, learning about Streamlit easy. The goal is to create a series of videos that will allow new (and experienced!) users of Streamlit a new way to learn (or remember) how to use, create and debug some of the most common Streamlit functions. We k…

Happy Streamlit-ing
Marisa

[BeyondMyself]

Hi, I got the reason, because youtube website can not be access when I am in China.
Will we have text instruction on own streamlit website?
thank you.

[Marisa_Smith]

Hey @BeyondMyself,

Yes, we will be putting the YouTube tutorials on our website (we are in the process of redesigning and adding more content to the docs!).

If we embed the videos on our website as well, would you be able to see them then?

Also, I update the forum post (the one linked above) with the new short each time one comes out, it has the code there that you can copy-paste and try yourself!

[BeyondMyself]

I can look the video when the media file is locating on streamlit server machine; if the video is just a link to youtube, I will can not look it.
Maybe you can download the video from youtube and upload it to streamlit website if it is possible.