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 Button widget.
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 root window.
We create the turn_off, vol_up, and 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()
The function 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_up and 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 TopLevel widget.
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.
Also available from Leanpub and Amazon Paperback
Purchasing Power Parity
Developers in [[ country ]] get [[ discount.discount_pc ]]% OFF on all books & courses with code [[ discount.coupon_code ]]Other Button Parameters
The 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.
activebackground&activeforeground-- sets the background or foreground colors when the cursor is over the buttonbd-- sets the border width of button in pixelsbg&fg-- sets the background and foreground colorsfont-- chooses the text font for the buttonheight&width-- sets height and width sizesimage-- 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 image=photo.
ON button.
Summary
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.
