Originally, the plan for this tutorial was to continue talking about layouts and the different layout managers in Tkinter. I was also going to include the
Button widget. But then I started writing the tutorial and it was so jam-packed that I decided to separate them to make things much easier. So today let's learn about a new and important widget, the
By the end of this tutorial, you will be able to include buttons in your GUI, know how to modify them to better fit your window, and learn a few ways to use them in your projects.
Let’s push that button!
Create A Button Widget
With any button in real-life, the purpose of pushing it is to perform some action, to actually do something. Push the button on the TV remote, the TV turns on. The buttons on the elevator? Select a floor to go to in the building. Click the 'X' button at the top-corner of this window and you will close it.
It's the same for buttons in Tkinter. Push the button and maybe display some text, or maybe call another function and perform some action. We can use the Button widget to create a very basic TV remote in the following code.
from tkinter import * root = Tk() # create parent window # use Button and Label widgets to create a simple TV remote turn_on = Button(root, text="ON") turn_on.pack() turn_off = Button(root, text="OFF", command=root.quit) turn_off.pack() volume = Label(root, text="VOLUME") volume.pack() vol_up = Button(root, text="+") vol_up.pack() vol_down = Button(root, text="-") vol_down.pack() root.mainloop()
Please refer to creating the root window or how to create Labels for help with the above code. Creating a
Button widget is super simple. Here we create four buttons and one label. The order in which they are created in the code is the order they will appear in the window. In line 5, we make a button object from the
Button class. Its first parameter is the main window and that is followed by the the text we want to display on the button,
"ON". Then in line 6 we
pack() the button in the
We create the
vol_down buttons in similar fashions and
pack() them in the window. However, only one of these buttons,
turn_off, does anything at the moment. We can use the keyword
command to make the button call a function.
root.quit() closes the
root window. From here we can look at adding functions to each of our buttons and learning how to alter their appearances.
TV remote UI.
If you are developing your own GUI and have a few buttons that don't yet do anything, then there is also a way to make the button inactive. Just add
state=DISABLED as one of the parameters and the button cannot be clicked.
Pushing Those Buttons
Above we have 3 buttons that don't do anything... yet. Let's begin by showing a simple example of creating a function and then use a button to call it.
from tkinter import * root = Tk() # create parent window def volumeUp(): '''output message to terminal to tell that the button is working''' print("Volume Increase +1") # Create volume up button vol_up = Button(root, text="+") vol_up.pack() root.mainloop()
volumeUp() is called whenever the
vol_up button is clicked in the window. Now that we have a basic understanding of how to use the
Button widget, the next step is to add more functionality to our TV remote. When the
turn_on button is clicked, let's create a window that opens up and displays an image. Then for
vol_down let's also print out a message to keep things simple for now. The following displays the code and each button has a command parameter.
from tkinter import * root = Tk() # create parent window def volumeUp(): '''output message to terminal to tell that the button is working''' print("Volume Increase +1") def volumeDown(): '''output message to terminal to tell that the button is working''' print("Volume Decrease -1") # use Button and Label widgets to create a simple TV remote def turnOnTV(): '''callback method used for turn_on button''' # use a Toplevel widget to display an image in a new window window = Toplevel(root) window.title("TV") image = PhotoImage(file="rain.gif") original_image = Label(window, image=image) original_image.image = image original_image.pack() turn_on = Button(root, text="ON", command=turnOnTV) turn_on.pack() turn_off = Button(root, text="OFF", command=root.quit) turn_off.pack() volume = Label(root, text="VOLUME") volume.pack() vol_up = Button(root, text="+", command=volumeUp) vol_up.pack() vol_down = Button(root, text="-", command=volumeDown) vol_down.pack() root.mainloop()
Lines 5-11 are functions to prove that the
vol_down buttons work properly. Look at lines 34 and 37 to see that the buttons are calling the functions using the
command argument. When the
turn_on button in line 25 is clicked it calls the
turnOnTV() function in lines 15-23. A new window will be appear and display a picture, much like turning on the TV. The
TopLevel widget is still part of the
root window, however our image (which is a
Label) is part of the
Turning the TV window "on" with the click of a button.
When the volume buttons are clicked, the following will display as output in the terminal. This can be very useful for testing if your buttons are working properly or to get feedback from the function calls.
Changing the volume with our buttons.
Other Button Parameters
Button widget also has some other options. Let's look at some of the more basic and commonly used ones. Many of these parameters can help to create buttons that look nicer or fit better into the style of our GUI. I have noticed since I am using Mac, that many of these parameters don't work at all.
In a later tutorial, we'll go over using the
tkinter.ttk module. If you are interested now then check out this link on ttk.
activeforeground-- sets the background or foreground colors when the cursor is over the button
bd-- sets the border width of button in pixels
fg-- sets the background and foreground colors
font-- chooses the text font for the button
width-- sets height and width sizes
image-- uses an image on the button rather than text
Display An Image On The Button
This tutorial is already a little long, but let's finish by showing how to add an image to a button. Modifying the code for the
"ON" button from above, the following code will display an image on the button rather than text.
# select image for on button on_button_photo = PhotoImage(file="onButton.gif") photo = on_button_photo.subsample(10,10) turn_on = ttk.Button(root, image=photo, command=turnOnTV) turn_on.pack()
In line 2, we load the image using
PhotoImage, then resize the image using
subsample. Then, we remove the
text="ON" parameter from earlier and add
That was a lot to cover. After reading this tutorial, I hope you realize that we can use buttons to do many things in Tkinter. Here we show how to create buttons and place them in our GUI. Then, we show how we can use them to display text, open a new window, or even edit them to be more aesthetically pleasing by changing their look or adding images.
Even though the basics of
Button widgets were taught here, we will continue to use them in future tutorials. Understand and practice using them to make your own projects.