Python Forum

Full Version: Glow text of clickable object on hover with transition
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I am relatively new in Tkinter and trying to achieve a glow effect on hover on clickable objects.
I have got this far in my effort which I am ashamed to share but everybody has to take a start from somewhere so why not.
from tkinter import *

def changeOnHover(button, colorOnHover, colorOnLeave):

	button.bind("<Enter>", func=lambda e: button.config(
		background=colorOnHover))

	button.bind("<Leave>", func=lambda e: button.config(
		background=colorOnLeave))
root = Tk()

myButton = Button(root,
				text="On Hover - Background Change",
				bg="yellow")
myButton.pack()

changeOnHover(myButton, "red", "yellow")

root.mainloop()
P.S. I have tried multiple solutions from google and they were a bit confusing for me and right now i am experiencing creativity blockage Wall so cant think much about how to achieve my desired results Huh .
A little addition to this to be more precise i am looking forward to achieve the hover effect like (Click me to start...) section of this game with relatively more smoother transition
I think you might be better off with creating images for the button, you can then create the exact glow that you want and swap images on entering and leaving like in the following youtube video.
Tkinter: Button Animation On Hover! Easy and Quick!
(May-09-2021, 08:36 AM)andy Wrote: [ -> ]I am relatively new in Tkinter and trying to achieve a glow effect on hover on clickable objects.
I have got this far in my effort which I am ashamed to share but everybody has to take a start from somewhere so why not.
from tkinter import *

def changeOnHover(button, colorOnHover, colorOnLeave):

	button.bind("<Enter>", func=lambda e: button.config(
		background=colorOnHover))

	button.bind("<Leave>", func=lambda e: button.config(
		background=colorOnLeave))
root = Tk()

myButton = Button(root,
				text="On Hover - Background Change",
				bg="yellow")
myButton.pack()

changeOnHover(myButton, "red", "yellow")

root.mainloop()
P.S. I have tried multiple solutions from google and they were a bit confusing for me and right now i am experiencing creativity blockage Wall so cant think much about how to achieve my desired results Huh .

(May-09-2021, 09:49 AM)Yoriz Wrote: [ -> ]I think you might be better off with creating images for the button, you can then create the exact glow that you want and swap images on entering and leaving like in the following youtube video.
Tkinter: Button Animation On Hover! Easy and Quick!

First of all thanks for your contribution, Yeah I already looked into stuff like this, but adding images will eventually increase the size of my page, Isn't there a more efficient way to achieve the desired results? or I should stick to the course you mentioned.
Here is an older post. Maybe it will help.
Hover Buttons
Thought I would add an image version.


#! /usr/bin/env python3

import tkinter as tk

def on_enter(e):
    img = tk.PhotoImage(file='enter.png')
    btn['image'] = img
    img.img = img
    label['text'] = 'Enter button area.'

def on_exit(e):
    img = tk.PhotoImage(file='default.png')
    btn['image'] = img
    img.img = img
    label['text'] = 'Exit button area'

def on_press(e):
    img = tk.PhotoImage(file='press.png')
    btn['image'] = img
    img.img = img
    label['text'] = 'Pressed the button'

def on_release(e):
    img = tk.PhotoImage(file='default.png')
    btn['image'] = img
    img.img = img
    label['text'] = 'Button was released'

root = tk.Tk()
root.geometry('+400+300')
img = tk.PhotoImage(file='default.png')
btn = tk.Button(image=img)
btn.pack()
img.img = img
btn.bind('<Enter>', on_enter)
btn.bind('<Leave>', on_exit)
btn.bind('<Button-1>', on_press)
btn.bind('<ButtonRelease-1>', on_release)

label = tk.Label(None, text='', bg='ivory', fg='purple', width=50, height=15)
label.pack()

root.mainloop()
@menator01 Thanks for this amazing input really appreciate your effort. It is absolutely a brilliant foundation code, to begin with.