Code Editor for app.py

"""
Inspired by: https://discuss.streamlit.io/t/button-css-for-streamlit/45888/10
"""
import streamlit as st

st.markdown(
    """
    <style>
    .element-container:has(style){
        display: none;
    }

    .element-container:has(#primary) {
        display: none;
    }

    .element-container:has(#secondary) {
        display: none;
    }

    .element-container:has(#primary) + div button {
        background-color: #4CAF50; /* Green background */
        border: none; /* Remove borders */
        color: white; /* White text */
        padding: 15px 32px; /* Add some padding */
        text-align: center; /* Center text */
        text-decoration: none; /* Remove underline */
        display: inline-block; /* Make the button inline block */
        font-size: 16px; /* Increase font size */
        margin: 4px 2px; /* Add some margin */
        transition-duration: 0.4s; /* Transition effect */
        cursor: pointer; /* Pointer cursor on hover */
    }

    .element-container:has(#primary) + div button:hover {
        background-color: white; /* White background on hover */
        color: black; /* Black text on hover */
        border: 2px solid #4CAF50; /* Green border on hover */
    }

    .element-container:has(#secondary) + div button {
        background-color: #800080; /* Purple background */;
        border: none; /* Remove borders */
        color: white; /* White text */
        padding: 15px 32px; /* Add some padding */
        text-align: center; /* Center text */
        text-decoration: none; /* Remove underline */
        display: inline-block; /* Make the button inline block */
        font-size: 16px; /* Increase font size */
        margin: 4px 2px; /* Add some margin */
        transition-duration: 0.4s; /* Transition effect */
        cursor: pointer; /* Pointer cursor on hover */
    }

    .element-container:has(#secondary) + div button:hover {
        background-color: white; /* White background on hover */
        color: black; /* Black text on hover */
        border: 2px solid #800080; /* Purple border on hover */
    }
    </st
    </style>
    """,
    unsafe_allow_html=True,
)

def styler(id_="primary"):
    st.markdown(f'<span id="{id_}"></span>', unsafe_allow_html=True)


# place this right before the button
styler("primary")
if st.button("button1"):
    st.write("button 1 clicked!")


styler("secondary")
if st.button("button2"):
    st.write("button 2 clicked!")