pythonpython-3.xtkinterhoveronhover

hover over button color in tkinter


im working on this tkinter project im close to finishing but i cant seem to find a way to change the button color when i hover on it so can you help here is my code

import tkinter as tk

window = tk.Tk()
img = tk.PhotoImage(file='C:\\Users\\laithmaree\\PycharmProjects\\create_apps_with_python\\brainicon.ico.png')
window.title("Quiz Game")

# i created an icon
# i made a title


window.geometry("800x600")
window.resizable(width=False, height=False)
window.iconphoto(False, img)

label1 = tk.Label(window, text='Quiz App', font=("Arial Bold", 25))
label1.pack()

txtbox = tk.Entry(window, width=50)


def playbuttonclicked():
    label1.destroy()
    playbtn.destroy()
    quitbtn.destroy()
    label2 = tk.Label(window, text='What is the short form of computer science', font=("Arial Bold", 25))
    label2.pack()
    txtbox.place(x=250, y=200, height=40)

    def chkanswer():
        useranswer = txtbox.get()  # Get contents from Entry
        if useranswer == 'cs':
            lblcorrect = tk.Label(window, text='correct')
            lblcorrect.pack()

            def delete():
                lblcorrect.destroy()

            lblcorrect.after(1000, delete)


        else:
            lblwrong = tk.Label(window, text='Try Again')
            lblwrong.pack()

            def deletefunction():
                lblwrong.destroy()

            lblwrong.after(1000, deletefunction)

    submitbtn = tk.Button(window, text='Submit', font=('Arial Bold', 30), command=chkanswer, bg='red')
    submitbtn.place(x=305, y=400)


playbtn = tk.Button(window, text='Play', font=("Arial Bold", 90), bg='red', command=playbuttonclicked)
playbtn.place(x=10, y=200)


def quitbuttonclicked():
    window.destroy()


quitbtn = tk.Button(window, text='Quit', font=("Arial Bold", 90), bg='red', command=quitbuttonclicked)
quitbtn.place(x=400, y=200)

window.mainloop()

the buttons are submitbtn,playbtn,quitbtn i want the hover over buttons to be black there already red i just want them to be black when i hover over them thx


Solution

  • Bind each of the buttons to entering and leaving events (when mouse enters and leaves the widget) and based on which one is triggered, change the background color of the button:

    btn.bind('<Enter>', lambda e: e.widget.config(bg='black'))
    btn.bind('<Leave>', lambda e: e.widget.config(bg='red'))