Tkinter Hovering over Button -> Color change

Question

Is there a possibility to change the background-color of a Button after hovering on it? What is the code for this in Tkinter?

Answer 1

Sadly the activebackground and activeforeground options only seem to work when you are clicking on the button rather than when you hover over the button. Use the <Leave> and <Enter> events instead

import tkinter as tk

def on_enter(e):
    myButton['background'] = 'green'

def on_leave(e):
    myButton['background'] = 'SystemButtonFace'

root = tk.Tk()
myButton = tk.Button(root,text="Click Me")
myButton.grid()


myButton.bind("<Enter>", on_enter)
myButton.bind("<Leave>", on_leave)

root.mainloop()

As pointed out in the comments, if we want multiple buttons, we can bind the buttons to functions that use the event data for the click event to change the background of the button.

import tkinter as tk

def on_enter(e):
    e.widget['background'] = 'green'

def on_leave(e):
    e.widget['background'] = 'SystemButtonFace'

root = tk.Tk()
myButton = tk.Button(root,text="Click Me")
myButton.grid()


myButton.bind("<Enter>", on_enter)
myButton.bind("<Leave>", on_leave)

myButton2 = tk.Button(root,text="Click Me")
myButton2.grid()


myButton2.bind("<Enter>", on_enter)
myButton2.bind("<Leave>", on_leave)

root.mainloop()

A slicker way to do it for multiple buttons would be to create a new Button class that modifies the behaviour of the default button so that the activebackground actually works when you hover.

import tkinter as tk

class HoverButton(tk.Button):
    def __init__(self, master, **kw):
        tk.Button.__init__(self,master=master,**kw)
        self.defaultBackground = self["background"]
        self.bind("<Enter>", self.on_enter)
        self.bind("<Leave>", self.on_leave)

    def on_enter(self, e):
        self['background'] = self['activebackground']

    def on_leave(self, e):
        self['background'] = self.defaultBackground

root = tk.Tk()

classButton = HoverButton(root,text="Classy Button", activebackground='green')
classButton.grid()

root.mainloop()