CODEWITHSUNDEEP
pythontkinter
Jarrod Jones
Jarrod Jones

Reputation: 99

Remove border of tkinter button created with an image

I've created a couple of buttons using my program and I've made them include images. However, I wish to now remove the border that remains (see https://i.sstatic.net/K128c.png for screenshot).

The code for the "back" button as an example:

backbutton = ttk.Button(mainframe, command=homereturn)
backbuttonimage = PhotoImage(file="back.gif")
backbutton.config(image=backbuttonimage)
backbutton.pack()
backbutton.grid(column=0, row=1)

Any help would be greatly appreciated.

Upvotes: 9

Views: 39323

Answers (11)

steveH
steveH

Reputation: 320

On a Mac, none of these seemed to work. In photo editing software (Photoshop): Create the button image with the same color background as you intend to set your tkinter window to. Also make sure your button image background is at least a few pixels larger than the image.

In your code: Reduce the size of the button by a few pixels. Test by clicking on your button. If you notice the outline reappearing, reduce it some more. Here the original file "button.png" was 100x40 pixels.

# Set the background color to whatever you want
# This is the color value for "Dark" windows on a Mac.
root.configure(bg="#323232")
my_image = tk.PhotoImage(file="button.png")
button = tk.Button(root, image=my_image, width=96, height=36)
button.pack()

Upvotes: 1

Timbo
Timbo

Reputation: 81

I had the same issue with imaged buttons. Neither bd=0 nor highlichtthickness=0 alone helped. I even suspected the relief-option to play it's part.

What finally helped me: pady=0, padx=0

So, for the question asked:

backbutton.config(image=backbuttonimage, highlightthickness=0, pady=0, padx=0)

could work.

Upvotes: 2

user20034454
user20034454

Reputation: 21

I think what you are looking for is this:

padding='0,0,0,0'

CODE:

ttk.Button( frame, text='B', image='myimg.png', padding='0,0,0,0', command=my_cmd)

Sorry, that it comes how many years later.

Upvotes: 0

toyota Supra
toyota Supra

Reputation: 4537

Not all themes support changing borderwidth. Try using tkinter.tk instead of using ttk.Button.

Use keyword borderwidth=0 for Button's parameter.

You cannot use both backbutton.pack() and backbutton.grid(). You can select one of them.

Snippet:

from tkinter import ttk
import tkinter as tk
 

mainframe = tk.Tk()
              
def homereturn():
    print('hello')

backbutton = tk.Button(mainframe, command=homereturn, borderwidth=0)
backbuttonimage = tk.PhotoImage(file="p1.png")
backbutton.config(image=backbuttonimage)
backbutton.pack()
 
mainframe.mainloop()

Screenshot w/out border:

enter image description here

Upvotes: 0

JohnRellim
JohnRellim

Reputation: 21

Using a new Mac I had the same issue and none of the other answers fully removed the border surrounding the button. I found that setting highlightbackground to the canvas's background color did the trick.

Upvotes: 2

Hartmut Braun
Hartmut Braun

Reputation: 167

None of the solutions provided so far worked in my case.

(I can only suspect that this is related to the new MacOS GUI style policy of recent versions (I'm using Big Sur). Also other style options don't work on MacOS, e.g. the relief option doesn't have any effect on the appearance of a button.)

Here is my solution: when you put an image to a button, the options width and height take pixels as unit. When you chose small values, i.e. 10x10, the border seems to be covered by the image. Voilá!

Upvotes: 1

Azid Ali
Azid Ali

Reputation: 17

You can use highlightthickness=0 and bd=0

Upvotes: 1

Shlok Madnani
Shlok Madnani

Reputation: 1

If you are using the import function as:

from tkinter import *

Button(main_scr, text = "OK", bg = "yellow", bd = 0, command = delete1).pack()

The bd = 0 would not show the border.

Upvotes: 0

Pakium
Pakium

Reputation: 321

backbutton = tk.Button(...,  highlightthickness = 0, bd = 0)

This works for Python 3.x, I tried...

enter image description here

 icon = PhotoImage(file="lock.png")
 self.company_lock_button = Button(self.control_lock_frame, image = icon, highlightthickness = 0, bd = 0)
 self.day_lock_button = Button(self.control_lock_frame, image = icon)
 self.hour_lock_button = Button(self.control_lock_frame, image = icon)

Upvotes: 19

Bryan Oakley
Bryan Oakley

Reputation: 385800

If you are using images to define a custom button, use the standard button class rather than the ttk button class. This will allow you to set the borderwidth attribute to zero:

import tkinter as tk
...
backbutton = tk.Button(..., borderwidth=0)

(unrelated: there's no point in calling backbutton.pack() and immediately follow it with backbutton.grid(...) - you can only use one for a particular widget, and the last one you call is the one that has any effect. In this case the call to pack is completely useless)

Upvotes: 8

Pythonista
Pythonista

Reputation: 11615

Here's one way you could do it..

Use ttk.Style() to set the button's background color to the color of mainframe.

root_color = "red" #Just an example, can't remember the default tk window color

mainframe = tk.Tk() #or whatever mainframe is
mainframe.configure(bg = root_color)
style = ttk.Style()
style.configure('TButton', background = root_color)
backbutton = ttk.Button(mainframe, command=homereturn)
backbuttonimage=PhotoImage(file="back.gif")
backbutton.config(image=backbuttonimage)
backbutton.pack()
backbutton.grid(column=0, row=1)

As a side note, you don't have to specify style = .. in your ttk button here because you are configuring the default TButton style ttk uses. If you defined a custom style for this button you would have to specify this in the keyword arguements for the button.

An example would be giving your button rounded edges instead of using images to achieve the desired effect.

Upvotes: 0

Related Questions