Create Streamlit Button and Style Streamlit Buttons

Streamlit is a Python module that is used to create web applications. The usage of Streamlit is very simple. It provides many cool features and one of the most important features is Streamlit Button. We can create Streamlit Buttons in various ways and create different functions for each of the buttons. Moreover, we can also apply CSS on buttons to change their color, fonts, size, etc. In this short article, we will go through Streamlit Buttons and will play with them to create interactive web applications. If you have any specific questions, please let us know through comments.

By the end of the tutorial, we will be able to create such an interactive web application where each button will be performing a different function.

Lets start the web application

Create Streamlit Button

Creating buttons in Streamlit is very simple. There are many methods to create and make the buttons functional in Streamlit. In this section, we will learn how we can create buttons in Streamlit and then will learn how to style them.

To start the web application, first, you need to create a python file and you can name it to anything. Then import the following libraries as we will be using these libraries in our application.

import streamlit as st
import pandas as pd
import plotly.express as px

Now let us import the dataset that we are going to use in our application. Moreover, we will also give a title to our application.

# reading the dataset
PM1_pred = pd.read_csv("PM1_predictions.csv")

# printing the dataset to the web app
st.title("Streamlit Buttons Tutorial")

Once you are done with these steps, you need to run the application in order to see if the application is running correctly or not. Run the following command in order to see the web application live on the local host.

streamlit run [Python file name]

Once you run the command, you should get something like this:

Adding Streamlit Buttons

Adding buttons in Streamlit is a very easy process. All we need to do is to call the button function from the Streamlit library. Let us create three different buttons which will help us to plot the dataset that we have imported in different ways.

# creating three buttons in streamlit
table = st.button(label="Table")
line = st.button('Line chart')
scatter = st.button('Scattered chart')

Output:

As you can see, three different buttons have been created.

Creating Functional Buttons in Streamlit

Now we have created buttons, we need to create different functions for each of the buttons. We will use the if statement to check which button is clicked and then accordingly displayed.

if table:
    st.subheader('Dataset Table')
    st.table(PM1_pred)

if line :
    st.subheader("Line Chart of the Dataset")
    
    # creating the plotly chart
    fig = px.line(PM1_pred)

    # creating line chart in streamlit
    st.plotly_chart(fig)

if scatter:
    st.subheader("Scattered Chart of the Dataset")
    
    # creating the plotly chart
    fig1 = px.scatter(PM1_pred)

    # creating line chart in streamlit
    st.plotly_chart(fig1)

Output:

We have used the if statements to show different plots. The first if statement checks if the table button is clicked or not. If the button is clicked then the if statement will be True and then it will display the data in tabular form. If the Line button is clicked, then the next if statement will be True and a Line chart will be displayed.

Adding Buttons to Sidebar in Streamlit

We will now display the buttons in the sidebar to make our web application looks good. All the buttons will be displayed on the sidebar and the graphs will be displayed in the main content area.

All you need to do to display the buttons in the sidebar is to add a sidebar in the code as shown below:

# creating three buttons in streamlit
table = st.sidebar.button(label="Table")
line = st.sidebar.button('Line chart')
scatter = st.sidebar.button('Scattered chart')

Output:

As you can see, now the web application looks much better.

Styling the Streamlit Buttons

In order to apply styling to the Streamlit buttons, we first need to load a CSS file to our Python file. We can use the following code to open a CSS file. Past the code at the top of the Python file:

# function to open css file
def local_css(file_name):
    with open(file_name) as f:
        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)

local_css("style.css")

Make sure that you have named your CSS file style.css. If not, then you need to change the name of the CSS file in the above code accordingly.

You may also like

Streamlit Line Charts Using Plotly, Matplotlib and Seaborn

The next thing is to find the class of the buttons and the background. In order to find the class of the buttons, go to the web application and click on inspect to see the HTML version of the web application. Now, you can scroll and find the class for the respective elements and make changes in the CSS file accordingly.

In this way, you can find the class name of different elements and then change their properties in the CSS file accordingly.

In our case, we have found the class name of our buttons. Now, we will change their background color and then will increase their width size by using the following code in the CSS file.

.css-1ik2ge.edgvbvh10{
background-color: rgb(188, 187, 253);
width: 100%;

}

Now, if we will run the application, it will look like this:

Notice that here we have just used the very basic level of CSS in order to give you an idea of how you can add a CSS file to your project.

Full Source Code of Streamlit Buttons Web Application

Here is the full code of the Python web application that we just created in this tutorial.

import streamlit as st
import pandas as pd
import plotly.express as px

# function to open css file
def local_css(file_name):
    with open(file_name) as f:
        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)

local_css("style.css")


# reading the dataset
PM1_pred = pd.read_csv("PM1_predictions.csv")

# printing the dataset to the web app
st.title("Streamlit Buttons Tutorial")

# creating three buttons in streamlit
table = st.sidebar.button(label="Table")
line = st.sidebar.button('Line chart')
scatter = st.sidebar.button('Scattered chart')

if table:
    st.subheader('Dataset Table')
    st.table(PM1_pred)

if line :
    st.subheader("Line Chart of the Dataset")
    
    # creating the plotly chart
    fig = px.line(PM1_pred)

    # creating line chart in streamlit
    st.plotly_chart(fig)

if scatter:
    st.subheader("Scattered Chart of the Dataset")
    
    # creating the plotly chart
    fig1 = px.scatter(PM1_pred)

    # creating line chart in streamlit
    st.plotly_chart(fig1)

And here is the CSS file that we have used.

.css-1ik2ge.edgvbvh10{
background-color: rgb(188, 187, 253);
width: 100%;

}

Hopefully, this tutorial was useful. If you have any questions or you face problems in running the given code, please let us know through comments.

Summary

Streamlit buttons can be created using the button function in the Streamlit module. We can create buttons either in the main content area or in the sidebar as well. Moreover, we can also apply CSS to style the layout of the Streamlit Buttons.