Hello everyone! In today’s article on Tkinter, we’ll cover the Tkinter Button widget.
The Tkinter button widget is a very simple and easy-to-use widget.
Let’s look at how we can construct buttons and add functionality to our GUI application, using some illustrative examples!
Tkinter Button Widget
This widget can be used to make different types of buttons.
We can have buttons containing not only text, but also images!
We can also make a Tkinter Button call a specific function corresponding to the button functionality, using a callback function.
To define a button with some specific text and a callback function, we can use the following definition:
button = tk.Button(master, text, command)
Here, text is the text on the button, and command refers to the callback function which is invoked when the button is pressed.
Let’s now make a simple application having a button, which when clicked, displays an Alert Box, which tells us that it was clicked!
The below code snippet shows this, with comments explaining every single line of code.
import tkinter as tk
from tkinter import messagebox
# Create the master object
master = tk.Tk()
# Sets the window size as "300x300"
master.geometry("300x300")
# This is the button callback function
# This must be visible to the button, so we must define it before the button widget!
def buttonCallback():
messagebox.showinfo("Message", "You have clicked the Button!")
# Create a Button widget
button = tk.Button(master, text="Click", command=buttonCallback)
# And a label for it
label_1 = tk.Label(master, text="Simple Button")
# Use the grid geometry manager to put the widgets in the respective position
label_1.grid(row=0, column=0)
button.grid(row=1, column=0)
# The application mainloop
tk.mainloop()
Now, on running this program, you’ll get the following output.
Now, if you want an image to go along with your button, to make it a bit more fancy, it’s possible!
Simply add another keyword argument to the tk.Button() call, called image! This is a ImageTk.PhotoImage, which you must instantiate using an image file.
To use ImageTk, we must import it from the PIL module. We first create a PIL image, resize it so that it is small enough, and then form our PhotoImage.
from PIL import Image, ImageTk
# Create a tk.PhotoImage
my_image = Image.open("path/to/image.png")
# Resize it to fit button dimensions
my_image = my_image.resize((25, 25), Image.ANTIALIAS)
Now, we’re ready to form the photoimage object.
my_image = Imagetk.PhotoImage(my_image)
Now, finally, we can add it to our button!
b = Button(compound=LEFT, image=my_image, text="Button")
However, you must be a bit careful, since using an icon will override any text that a button has.
To avoid this, use the compound keyword argument. This value can be set to tk.CENTER, tk.LEFT, tk.RIGHT, tk.TOP or tk.BOTTOM. This will specify the orientations of the text, with respect to the image.
Since we will place the text on top of the image, we’ll use tk.TOP
b = Button(compound=LEFT, image=my_image, text="Button", compound=tk.TOP)
I’ll show you the complete code below:
import tkinter as tk
from tkinter import messagebox
from PIL import Image, ImageTk
# Create the master object
master = tk.Tk()
# Sets the window size as "300x300"
master.geometry("300x300")
# This is the button callback function
# This must be visible to the button, so we must define it before the button widget!
def buttonCallback():
messagebox.showinfo("Message", "You have clicked the Button!")
# Create a tk.PhotoImage
my_image = Image.open("debian.png")
# Resize it to fit button dimensions
my_image = my_image.resize((25, 25), Image.ANTIALIAS)
# Finally, get the PhotoImage object
my_image = ImageTk.PhotoImage(my_image)
# Create a Button widget
button = tk.Button(master, text="Click", image=my_image, command=buttonCallback, compound=tk.TOP)
# And a label for it
label_1 = tk.Label(master, text="Simple Button")
# Use the grid geometry manager to put the widgets in the respective position
label_1.grid(row=0, column=0)
button.grid(row=1, column=0)
# The application mainloop
tk.mainloop()
Output
Conclusion
Hopefully, you were also able to build your own Tkinter Button widget. In the upcoming tutorials, we’ll focus more on some more widgets, so stay tuned for more!