Tkinter Button with an image
Generally Button is used with text as the button name, as shown in Tkinter Button Lambda Expression, or you can use an image as the name of the button. If you use an image as the button, you can omit the text parameter within Button( ) to set the button name, but add the image parameter within Button( ) to set the image object.
Tkinter Button with an image Example#1
Use apidemos.png image instead of Print Message
Button.
from tkinter import *
cnt=1
def msgShow():
global cnt
# label["text"] = "I love Python x" + str(cnt)
# label["bg"] = "lightyellow"
# label["fg"] = "blue"
label.config(text="I love Python x" + str(cnt),
bg="lightyellow",fg="blue")
cnt += 1
root = Tk()
root.title("apidemos.com")
root.geometry("300x300")
label = Label(root)
# label["text"] = "I love Java"
sunGif = PhotoImage(file="apidemos.png")
btn = Button(root,image=sunGif,command=msgShow)
label.pack()
btn.pack()
root.mainloop()
Output:
When designing a function button, if you want the image and text to co-exist inside the function button, you need to add the parameter compund=xx
inside Button( ).
Where xx can be LEFT, TOP, RIGHT, BOTTOM, CENTER, representing the graphics in the left, top, right, bottom and center of the text respectively.
Tkinter Button with an image Example#2
Place the apidemos.png image on top of the text Click Me.
from tkinter import *
cnt=1
def msgShow():
global cnt
# label["text"] = "I love Python x" + str(cnt)
# label["bg"] = "lightyellow"
# label["fg"] = "blue"
label.config(text="I love Python x" + str(cnt),
bg="lightyellow",fg="blue")
cnt += 1
root = Tk()
root.title("apidemos.com")
root.geometry("300x300")
label = Label(root)
# label["text"] = "I love Java"
myPic = PhotoImage(file="apidemos.png")
btn = Button(root,image=myPic,command=msgShow,
text="Click Me",compound=TOP)
label.pack()
btn.pack()
root.mainloop()
Output:
Tkinter Button with an image Example#3
Overlay the text with the image inside the Button.
from tkinter import *
cnt=1
def msgShow():
global cnt
# label["text"] = "I love Python x" + str(cnt)
# label["bg"] = "lightyellow"
# label["fg"] = "blue"
label.config(text="I love Python x" + str(cnt),
bg="lightyellow",fg="blue")
cnt += 1
root = Tk()
root.title("apidemos.com")
root.geometry("300x300")
label = Label(root)
# label["text"] = "I love Java"
myPic = PhotoImage(file="apidemos.png")
btn = Button(root,image=myPic,command=msgShow,
text="Click Me",compound=CENTER)
label.pack()
btn.pack()
root.mainloop()
Output:
Tkinter Button with an image Example#4
Place the image to the left of the text inside the Button.
from tkinter import *
cnt=1
def msgShow():
global cnt
# label["text"] = "I love Python x" + str(cnt)
# label["bg"] = "lightyellow"
# label["fg"] = "blue"
label.config(text="I love Python x" + str(cnt),
bg="lightyellow",fg="blue")
cnt += 1
root = Tk()
root.title("apidemos.com")
root.geometry("300x300")
label = Label(root)
# label["text"] = "I love Java"
myPic = PhotoImage(file="apidemos.png")
btn = Button(root,image=myPic,command=msgShow,
text="Click Me",compound=LEFT)
label.pack()
btn.pack()
root.mainloop()
Output: