Python Forum
[Tkinter] Glow text of clickable object on hover with transition
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tkinter] Glow text of clickable object on hover with transition
#1
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 .
Reply
#2
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
Reply
#3
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!
andy likes this post
Reply
#4
(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.
Reply
#5
Here is an older post. Maybe it will help.
Hover Buttons
andy likes this post
I welcome all feedback.
The only dumb question, is one that doesn't get asked.
My Github
How to post code using bbtags


Reply
#6
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()
andy likes this post
I welcome all feedback.
The only dumb question, is one that doesn't get asked.
My Github
How to post code using bbtags


Reply
#7
@menator01 Thanks for this amazing input really appreciate your effort. It is absolutely a brilliant foundation code, to begin with.
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  [PyQt] Hover over highlighted text and open popup window DrakeSoft 2 1,448 Oct-29-2022, 04:30 PM
Last Post: DrakeSoft
  [PyQt] Determining the format attributes on text in a QTextEdit object DrakeSoft 7 3,449 Apr-18-2022, 06:40 PM
Last Post: DrakeSoft
  [PyQt] AttributeError: 'NoneType' object has no attribute 'text' speedev 9 11,235 Sep-25-2021, 06:14 PM
Last Post: Axel_Erfurt
  [Tkinter] Clickable Rectangles Tkinter Canvas MrTim 4 8,669 May-11-2021, 10:01 PM
Last Post: MrTim
  [Tkinter] Hover event DT2000 9 7,313 Apr-19-2020, 05:51 AM
Last Post: DT2000
  Making text clickable with binding DT2000 10 5,032 Apr-02-2020, 10:11 PM
Last Post: DT2000
  [PyQt] Ubuntu Taskbar icon shows title as "Unknown" while hover davidmuni 3 3,686 Jan-28-2020, 01:13 PM
Last Post: davidmuni
  Help: Enlarge image on hover morganruben 1 3,178 May-22-2018, 10:08 AM
Last Post: j.crater
  (pyQt/pySide)setStyleSheet(border…) makes QPushButton not clickable in Maya vladlenPy 0 4,697 Apr-15-2018, 12:41 PM
Last Post: vladlenPy
  pyqt clickable pushbutton problem pythonck 1 7,594 Dec-12-2017, 03:38 PM
Last Post: pythonck

Forum Jump:

User Panel Messages

Announcements
Announcement #1 8/1/2020
Announcement #2 8/2/2020
Announcement #3 8/6/2020