Tkinter – Button that changes its properties on hover

Last Updated : 10 Apr, 2023

Python offers multiple options for developing GUI (Graphical User Interface). Out of all the GUI methods, tkinter is the most commonly used method. It is a standard Python interface to the Tk GUI toolkit shipped with Python. Python with tkinter is the fastest and easiest way to create GUI applications. Creating a GUI using tkinter is an easy task.

In this article, we are going to create a button that changes its properties on hover.

Step-by-step Approach:

Import tkinter module.

Python3

# import required module
from tkinter import *

Creating A Universal Function To Give Change On Hover Power To Every Button.

The config() method is used to change the properties of any widget. Note that in config() method bg and background are two different options and background represents background-color.

Syntax:

widget.config(**options)

Below is the implementation:

Python3

# function to change properties of button on hover
def changeOnHover(button, colorOnHover, colorOnLeave):
 
    # adjusting background of the widget
    # background on entering widget
    button.bind("<Enter>", func=lambda e: button.config(
        background=colorOnHover))
 
    # background color on leving widget
    button.bind("<Leave>", func=lambda e: button.config(
        background=colorOnLeave))

Create a button in driver code and call the explicit function.

Python3

# Driver Code
root = Tk()
 
# create button
# assign button text along
# with background color
myButton = Button(root,
                  text="On Hover - Background Change",
                  bg="yellow")
myButton.pack()
 
# call function with background
# colors as argument
changeOnHover(myButton, "red", "yellow")
 
root.mainloop()

Below is the complete program based on the above approach:

Python3

# import required module
from tkinter import *
 
 
# function to change properties of button on hover
def changeOnHover(button, colorOnHover, colorOnLeave):
 
    # adjusting backgroung of the widget
    # background on entering widget
    button.bind("<Enter>", func=lambda e: button.config(
        background=colorOnHover))
 
    # background color on leving widget
    button.bind("<Leave>", func=lambda e: button.config(
        background=colorOnLeave))
 
 
# Driver Code
root = Tk()
 
# create button
# assign button text along
# with background color
myButton = Button(root,
                  text="On Hover - Background Change",
                  bg="yellow")
myButton.pack()
 
# call function with background
# colors as argument
changeOnHover(myButton, "red", "yellow")
 
root.mainloop()