Struggling with buttons colors

[Ahmed1]

Hi Everyone! I am trying to change the color of a single button in my app. I 've tried the markdown option and the theming option as well. The problem is that these options change the color of all the buttons in my app, and I only want to change the color of just one. Is there any way to do that? Thanks

[edsaac]

What about setting the first button as a primary button, and leave the rest as secondary. This can be done with the keyword argument type in st.button.

import streamlit as st
from itertools import cycle

cols = cycle(st.columns(3))

for i,col in zip(range(1, 13), cols):
    if i == 1: button_type = 'primary'        #Treat the button 1 as primary 
    else: button_type = 'secondary'        #Leave the rest as secondary
    with col: 
        st.button(f"Button #{i}", use_container_width=True, type=button_type)

[Shawn_Pereira]

Hi @Ahmed1, have a look at the code by @mathcatsand also. The link is hereinbelow:

Issues with Background Colour for buttons

Here’s a modification of @Shawn_Pereira’s solution to include background color. import streamlit as st import streamlit.components.v1 as components 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}') {{ element…

Cheers

[Ahmed1]

thanks a lot everyone that was really helpful. I am working on this major project with my employer and we are using streamlit. I will keep coming with many questions, so thanks again for your help. And hopefully I can acquire more experience and be helpful to others in the future

[Ahmed1]

Thanks edsaac that was really helpful. I actually combined your idea with the markdown method and it worked