How do I change background colour of a button on hover in Tkinter?

Question

I want to change my background and foreground colour of a button on mouse cursor hover in the Python Tkinter module. I am able to change the background colour of the button once before packing it to the main window. But after the window.mainloop() line I cannot execute anymore line until the main window destroyed (or closed).

I am asking that is there any way to change the button colour (background and foreground) on mouse hover even after the window.mainloop() line?

My code

import tkinter

window = tkinter.Tk()
button = tkinter.Button(window, text="Test", fg='#03045e', command=terminate_instant,
                        relief=tkinter.RIDGE, bg='#caf0f8', activebackground='#ef233c',
                        activeforeground='white')
button.pack(side=tkinter.BOTTOM)
window.mainloop()

I don't understand what you want exactly since the colors of the button already changes on mouse hover (activeforeground and activebackground). — j_4321, Dec 10 '20 at 16:25
@j_4321: It doesn't on my Windows box. Also, I think yesterday I read something here indicating that on the MacOS, you can't change the background color of `Button`s — so there seems to be OS-specific behavior with regards to this. Found what I read: [How to change the foreground or background colour of a Tkinter Button on Mac OS X?](https://stackoverflow.com/questions/1529847/how-to-change-the-foreground-or-background-colour-of-a-tkinter-button-on-mac-os?rq=1) — martineau, Dec 10 '20 at 16:37
@martineau Yes, probably, there are several OS dependent behavior of the styling. When I put the cursor over the button it goes from light blue to dark red as set by the `bg` and `activebackground` options. On the over hand, acw1668's answer does not work for me since the `bg` set on entering the button is overriden by the `activebackground` option — j_4321, Dec 10 '20 at 16:39

acw1668 · Accepted Answer · 2020-12-10T16:16:41.397

3

You can use <Enter> and <Leave> events to change the fg and bg color of the button:

import tkinter

window = tkinter.Tk()
button = tkinter.Button(window, text="Test", fg='#03045e', command=terminate_instant,
                        relief=tkinter.RIDGE, bg='#caf0f8', activebackground='#ef233c',
                        activeforeground='white')
button.pack(side=tkinter.BOTTOM)
button.bind("<Enter>", lambda e: button.config(fg='#caf0f8', bg='#03045e'))
button.bind("<Leave>", lambda e: button.config(fg='#03045e', bg='#caf0f8'))
window.mainloop()

edited Dec 10 '20 at 16:16

answered Dec 10 '20 at 16:10

acw1668

40,144
5
22
34

1

Note that this solution is OS specific: on Linux, `activebackground` and `activeforeground` work as expected and override the `bg` and `fg` set in the bindings – j_4321 Dec 10 '20 at 16:41
As @j_4321 said, whether this works is OS dependent (works as expected for me on Windows). So…this would be what to do for maximum portability IMO. – martineau Dec 10 '20 at 16:55
@acw1668 I think there is a typo for the bg in the Enter binding: it should be '#ef233c', not '#03045e' (probably a copy/pasting mistake) – j_4321 Dec 10 '20 at 17:57
@j_4321 The colors are from the `fg` and `bg` options when creating the button. – acw1668 Dec 10 '20 at 18:10
@acw1668 OK, I just thought the OP wanted to use the colors from the activebackground and activeforeground options when hovering over the button. Anyway now that you provided the code anyone can easily change the colors to their liking. – j_4321 Dec 10 '20 at 21:21
At last! A correct answer regarding hovering over a button. And it had **only 2 upvotes** up to now (Nov 12, 2022) before mine! (On the other hand, I have seen many more upvotes for wrong answers for another similar question!) **Give this member more upvotes!**. – Apostolos Nov 12 '22 at 08:30

How do I change background colour of a button on hover in Tkinter?

1 Answers1