Changing Button Color

Using Streamlit
1

Hi there,

I’d love to know if there’s a way to change the red “highlight” when you however over a button.

image
image794×136 7.2 KB

Thank you in advance for the support.

2

I have the same question! Following this post.

3

Any update on this?

4

Haven’t found a way to do this yet, but I’ll definitely post once I figure this out… Also, any help would still be appreciated.

5

you can define any button appearance as you like:
replace the color code and you will get what you want.

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)
if st.button(“the notice you want to show”):
st.write(“content you want to tell”)

1 Like
7

You can change this by setting the primary color of the app theme, which will affect button highlights and many other colors in a consistent way. To do that, just add the following text to your config file (in .streamlit/config.toml), e.g. to set the primary color to blue:

[theme]
primaryColor="#1C83E1"

There are also more options, see our theming docs.

1 Like