Search code examples
pythonbuttontkintercolorsborder

How to change the color of the box surrounding a Tkinter Button?

I tried some things I found on Stackoverflow such as placing a frame around the button and giving that a color, like said here. I also tried some other stuff that is said here but I can't get it to work.

I'm using Mac OS and the buttons are rounded, but there's a square around it which makes it look not as nice. Does anyone know how I can get this square to change its color?

This is the code I'm working with:

empty = Button(frame, text='Opnieuw', command=clear, font=bold_font)
empty.config(width=10, fg='#009688', borderwidth=0, relief=RAISED)
empty.grid(row=11, column=0, pady=(25, 0), padx=(80, 0))

This is the square I'm talking about: the white one which is around the button and does not have that green color.

This is the square I'm talking about

After adding what Bryan Oakley said, by doing this:

empty = Button(frame, text='Opnieuw', command=clear, font=bold_font)
empty.config(width=10, fg='#009688', borderwidth=0, relief=RAISED)
empty.configure(highlightbackground="#009688")
empty.grid(row=11, column=0, pady=(25, 0), padx=(80, 0))

More specifically, this is a larger piece of the code I'm using:

from tkinter import *
from tkinter import font as tkfont

root = Tk()
root.config(background='#009688')
root.title('Contractmaker')

# GUI stuff that takes care of the scrollbar
def on_configure(event):
    canvas.configure(scrollregion=canvas.bbox('all'))

def on_mousewheel(event):
    canvas.yview_scroll(int(event.delta), 'units')

# Create some fonts
bold_font = tkfont.Font(weight='bold')

# Create the actual GUI
canvas = Canvas(root, width=450, height=550)
canvas.config(background='#009688')
canvas.pack(side=RIGHT)

scrollbar = Scrollbar(root, command=canvas.yview)
# scrollbar.pack(side=RIGHT, fill='y')

canvas.configure(yscrollcommand=scrollbar.set)
canvas.bind('<Configure>', on_configure)
canvas.bind_all('<MouseWheel>', on_mousewheel)

frame = Frame(canvas)
frame.config(background='#009688')
canvas.create_window((0,0), window=frame)

empty = Button(frame, text='Opnieuw', font=bold_font)
empty.config(width=10, fg='#009688', borderwidth=0, relief=RAISED)
empty.configure(highlightbackground='#009688')
empty.grid(row=11, column=0, pady=(25, 0), padx=(80, 0))

root.mainloop()

this is what I got:

enter image description here

Does anyone know how I can get the white part of the button to stay white instead of also changing its color? I'm using python 3.8 and Tkinter 8.6.

Solution

  • That white area is called the traversal highlight region. It changes color to let the user know when the button has the keyboard focus.

    You can change its non-focused color with the highlightbackground option, and its focused color with highlightcolor. You can set it to the color of the background to get it to blend in.

    empty.configure(highlightbackground="#009588")

    screenshot