├── streamlit_app.py
├── README.md
└── assets
    └── styles.css


/streamlit_app.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | import pathlib
 3 | 
 4 | 
 5 | # Function to load CSS from the 'assets' folder
 6 | def load_css(file_path):
 7 |     with open(file_path) as f:
 8 |         st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
 9 | 
10 | 
11 | # Load the external CSS
12 | css_path = pathlib.Path("assets/styles.css")
13 | load_css(css_path)
14 | 
15 | 
16 | st.title("✨ Streamlit CSS Styling Demo")
17 | st.subheader(
18 |     "As of Streamlit **version 1.39**, you can now set CSS classes on elements via the `key` parameter! 🎉"
19 | )
20 | st.code("pip install streamlit --upgrade", language="bash")
21 | st.divider()
22 | 
23 | # Sytled Button
24 | st.header("Buttons")
25 | st.button("I'm a green button", key="green")
26 | st.button("Click Me!", key="pulse")
27 | 
28 | # Text Input with Custom Font and Color
29 | st.header("Styled Text Input")
30 | st.text_input("Enter your favorite quote:", key="styledinput")
31 | 
32 | 
33 | # Text Area with Custom Font
34 | st.header("Styled Text Area")
35 | st.text_area("Your thoughts:", key="styledtextarea")
36 | 
37 | # Radio Buttons with Custom Styles
38 | st.header("Styled Radio Buttons")
39 | st.radio("Pick a choice:", ["Choice A", "Choice B", "Choice C"], key="styledradio")
40 | 
41 | # Markdown with Custom Font and Color
42 | st.header("Styled Markdown")
43 | st.markdown(
44 |     '<p class="custom-markdown">This is <strong>bold text</strong> with a custom font and color.</p>',
45 |     unsafe_allow_html=True,
46 | )
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Streamlit CSS Styling Demo
 2 | 
 3 | A demo app that showcases how to apply custom CSS styling to Streamlit components using the new feature introduced in **Streamlit 1.39**. With this update, you can now set CSS classes on elements via the `key` parameter, making it super easy to customize the look and feel of your app!
 4 | 
 5 | In the app, I play around with different styles like animated buttons with pulse effects, custom fonts, and colorful inputs. It's a simple way to see what's possible with a bit of CSS magic in Streamlit.
 6 | 
 7 | If you're curious or want to try it out yourself, check out the live app here: [styling.streamlit.app](https://styling.streamlit.app/)
 8 | 
 9 | And if you want to upgrade your Streamlit version to try these features, just run:
10 | 
11 | ```bash
12 | pip install streamlit --upgrade
13 | ```
14 | 
15 | Happy styling! 🎨
16 | 
17 | 
18 | ## Video Tutorial
19 | [![YouTube Video](https://img.youtube.com/vi/jbJpAdGlKVY/0.jpg)](https://youtu.be/jbJpAdGlKVY)
20 | 
21 | 
22 | ## 🤝 Connect with Me
23 | - 📺 **YouTube:** [CodingIsFun](https://youtube.com/c/CodingIsFun)
24 | - 🌐 **Website:** [PythonAndVBA](https://pythonandvba.com)
25 | - 💬 **Discord:** [Join the Community](https://pythonandvba.com/discord)
26 | - 💼 **LinkedIn:** [Sven Bosau](https://www.linkedin.com/in/sven-bosau/)
27 | - 📸 **Instagram:** [sven_bosau](https://www.instagram.com/sven_bosau/)
28 | 
29 | ## Support 
30 | If you find my tutorials helpful, consider [supporting my work](https://pythonandvba.com/coffee-donation).
31 | [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://pythonandvba.com/coffee-donation)
32 | 
33 | ## Feedback & Collaboration
34 | For feedback, suggestions, or potential collaboration opportunities, reach out at contact@pythonandvba.com.
35 | ![Logo](https://www.pythonandvba.com/banner-img)
36 | 


--------------------------------------------------------------------------------
/assets/styles.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .st-key-green button {
 3 |     background-color: green;
 4 | }
 5 | 
 6 | /* Animated button with pulse effect */
 7 | .st-key-pulse button {
 8 |     background-color: #4CAF50;
 9 |     border-radius: 10px;
10 |     padding: 20px 60px;
11 |     animation: pulse 2s infinite;
12 | }
13 | 
14 | .st-key-pulse button p {
15 |     font-size: 24px;
16 |     font-family: 'Comic Sans MS', sans-serif;
17 | }
18 | 
19 | /* Hover effect for the button */
20 | .st-key-pulse button:hover {
21 |     background-color: #45a049; /* Darker green */
22 |     border: none;
23 | }
24 | 
25 | .st-key-pulse button:hover p {
26 |     color: #FFD700; /* Gold color */
27 | }
28 | 
29 | /* Override the focus states to prevent default red border */
30 | .st-key-pulse button:focus {
31 |     background-color: #45a049; /* Keep the same as hover */
32 |     border: none;
33 | }
34 | 
35 | /* Apply the same text color during focus states */
36 | .st-key-pulse button:focus p {
37 |     color: #FFD700;
38 | }
39 | 
40 | 
41 | @keyframes pulse {
42 |     0% {
43 |         box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
44 |     }
45 |     70% {
46 |         box-shadow: 0 0 0 20px rgba(76, 175, 80, 0);
47 |     }
48 |     100% {
49 |         box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
50 |     }
51 | }
52 | 
53 | /* Text input with custom font and color */
54 | .st-key-styledinput input {
55 |     border: 5px solid #3cff1e;
56 |     border-radius: 8px;
57 | }
58 | 
59 | .st-key-styledinput input:focus {
60 |     border: none;
61 | }
62 | 
63 | 
64 | /* Text area with custom font */
65 | .st-key-styledtextarea textarea {
66 |     background-color: #e6e6fa;
67 |     border: 4px solid #9370DB;
68 |     border-radius: 8px;
69 |     font-family: 'Lucida Handwriting', cursive;
70 |     color: #4B0082;
71 | }
72 | 
73 | 
74 | /* Radio buttons with custom styles */
75 | .st-key-styledradio .stRadio p {
76 |     color: #8b2e86;
77 |     font-family: 'Comic Sans MS', sans-serif;
78 |     font-size: 24px;
79 | }
80 | 
81 | 
82 | /* Styled markdown */
83 | .custom-markdown {
84 |     font-family: 'Comic Sans MS', cursive, sans-serif;
85 |     color: #DA70D6;
86 |     font-size: 34px;
87 | }
88 | 


--------------------------------------------------------------------------------