Create 2 different buttons with different styles

🎈 Using Streamlit
1

button_style = “”"

.stButton > button {
color: white;
background: green;
width: 100px;
height: 50px;
}

“”"
st.markdown(button_style, unsafe_allow_html=True)
st.button(‘Button’)

But this will change all button styles, is there any method?
by the way, if I used the st.button(help), CSS will not work

2

Here’s a related post:

4

It works, and it can be applied to button size too. Thank you.

5

Hi
Thanks for the reply and solution, but after I use this to update my buttons, there’s a new issue.

I put some buttons into the expander, but there are many space line after buttons in expander.

image
image220×900 1.91 KB

But if I change the function position into the col, there’s one space line after every button.

def ChangeButtonColour(widget_label, font_color, background_color='transparent'):
    htmlstr = f"""
        <script>
            var elements = window.parent.document.querySelectorAll('button');
            for (var i = 0; i < elements.length; ++i) {{ 
                if (elements[i].innerText == '{widget_label}') {{ 
                    elements[i].style.color ='{font_color}';
                    elements[i].style.background = '{background_color}';
                    elements[i].style.height = 'fit-content';
                    elements[i].style.width = 'fit-content';
                }}
            }}
        </script>
        """
    components.html(f"{htmlstr}")

with col:
    lay,but = st.columns([.3,1])
    with lay:
        if rc==1:
            st.write(index)
    with but:
        open_modal = st.button(label=str(int(value['MOBO'].values[0])), key=str(value['physical_location'].values[0]), help=tooltip)
ChangeButtonColour(str(int(value['MOBO'].values[0])), 'black', classify_status(int(value['CATEGORY'].values[0])))
                    if open_modal:
                        build_modal(value,df_selection)

It looks like the script is taking up a lot of space。
Is there any good solution?

6

As a rule, I always write CSS and JavaScript hacks as the very last thing on the page so they don’t create space between elements. I wouldn’t use it inside any container you are using to display things. Instead, move all the uses to the last lines of your script.

7

I see, but there are still many space lines in the web page.
I move the script into the col, it can reduce some space lines.
Thank you for your reply.

8

Hi, I found another problem in st.button, if I add tooltip in button using ‘help’, width and height of button doesn’t work, but if I remove tooltip, it works.

elements[i].style.height = '100%';
elements[i].style.width = '100%';

image
Blue button has no tooltips, but grey button has.
it’s the result.

def ChangeButtonColour(widget_label, font_color, background_color='transparent'):
    htmlstr = f"""
        <script>
            var elements = window.parent.document.querySelectorAll('button');
            for (var i = 0; i < elements.length; ++i) {{ 
                if (elements[i].innerText == '{widget_label}') {{ 
                    elements[i].style.color ='{font_color}';
                    elements[i].style.background = '{background_color}';
                    elements[i].style.height = '100%';
                    elements[i].style.width = '100%';
                }}
            }}
        </script>
        """
    components.html(f"{htmlstr}")

with col:
    lay,but = st.columns([.3,1])
    with lay:
        if rc==1:
            st.write(index)
    with but:
        open_modal = st.button(label=str(int(value['MOBO'].values[0])), key=str(value['physical_location'].values[0]), help='tooltip')
ChangeButtonColour(str(int(value['MOBO'].values[0])), 'black', classify_status(int(value['CATEGORY'].values[0])))
                    if open_modal:
                        build_modal(value,df_selection)

is this a bug in st.button?

9

This is a more clean way to style any button in your streamlit app
First, ensure you apply styling to your Streamlit app at the beginning:

st.markdown("""
<style>.element-container:has(#button-after) + div button {
 /* APPLY YOUR STYLING HERE */
 }</style>""", unsafe_allow_html=True)

Then, anywhere in your code, you can use the following to apply the styling to a specific button:

st.markdown('<span id="button-after"></span>', unsafe_allow_html=True)
st.button('My Button')

This hack essentially inserts an empty <span> element with the id button-after before the button you want to style, and the CSS rule selects that button and applies the specified styling to it.
This could be used to style any element and you could make use of id selectors or class selectors depending on your use case.