Image Buttons And Rounded Buttons - Python Tkinter GUI Tutorial #66

In this video I'll show you how to use Images for your Buttons and how to make rounded buttons with tKinter!
I get asked all the time...how do you make rounded buttons in TKinter? The short answer is...you can't. At least not with a widget attribute. But you CAN use images as buttons pretty easily...and that's what we'll do in this video.

[@garrybeck216]

John, thanks for this series. very informative and easy to follow.

[@Codemycom]

Very welcome!

[@marckhycs319]

This series helps me a lot on building my own projects. Thanks!!!

[@Codemycom]

Great to hear!

[@Codemycom]

▶️ Watch Entire Tkinter Playlist ✅ Subscribe To My KZbin Channel: bit.ly/2UFLKgj bit.ly/2IGzvOR ▶️ See More At: ✅ Join My Facebook Group: Codemy.com bit.ly/2GFmOBz ▶️ Learn to Code at Codemy.com ✅ Buy a Codemy T-Shirt! Take $30 off with coupon code: youtube1 bit.ly/2VC9WUN

[@brandonhagopian7165]

Thank You so much for your effort John!

[@Codemycom]

Thanks for watching!

[@nowybopes]

If you need to do this on a background with a different color: 1. set button bg to color of the background (ex. bg="ffffff") 2. set button bg when it's clicked to color of the background (ex. activebackground="ffffff")

[@jdsguam]

Answered my next question right out of the gate! Thanks.

[@katmanduYT]

what if we use a background image

[@nowybopes]

​@@katmanduYT I don't think you can do anything about it in Tkinter

[@katmanduYT]

@@nowybopes okay :) thanks for the help tho

[@LucasSideris]

@@katmanduYT you can "cut" the an entire square block containing the button and background where it touches like a common internet image stripes process, and put the button bg as close as you can get from background part. It could be seamless depending on resolution and images used. @ubant Thank you so much, man!

[@MR.Science12]

YOUR AWESOME I WATCH MANY KZbin VIDEOS ABOUT PYTHON BUT POSSIBLE TO UNDERSTAND TODAY I FOUND THIS CHANNEL REALLY HELPUFLLY I UNDERSTOOD EVERYTHING

[@Codemycom]

Great to hear!

[@khyatiparikh2929]

its exactly what i wanted.... thanks codemy

[@Codemycom]

Glad you liked it!

[@dimitriosdesmos4699]

thanks for that, i needed it.

[@Codemycom]

Glad I could help

[@stellaschmucker3059]

Love your video!!❤

[@Codemycom]

Thanks!

[@amirmohammadk745]

best python teacher #1

[@katrinastewart3765]

thanks so much I'm completely new to all this and I already have buttons coded using classes for my separate windows and was wondering how to fit this code into it, as I want to use images as buttons ?

[@akramelomrani8728]

I am watching this series and I see that you started kivy When I finish tkinter I will Imediatly start kivy thank you for your tutorials I have watched most of them the flask series taught me how to push to heroku And I use it from then thank you sir

[@Codemycom]

Have fun!

[@m.t-thoughts8919]

Could you pls make a deeper video about tkinter notebook tabs? I would love to add buttons to the name area of a tap but I don't know how to do that. I want a similar adding and closing method as the Atom Text Editor has for it's taps. I hope you getting what I mean. This was also a really helpfull video. 😊

[@rubenmata73]

Just GREAT!!!! THANKS!

[@Codemycom]

Glad you liked it!

[@anuragthakur5787]

Thank you very much because of you I was able to make my first project :)

[@Codemycom]

Happy to hear it!

[@darkjunior2162]

Merci beaucoup pour cette vidéo 😄 Thank you very much for this video

[@Codemycom]

You're very welcome!

[@phudinhtruong]

another great video . tks u alot

[@Codemycom]

Glad you liked it!

[@maxblax9159]

I just thank you for this

[@Codemycom]

Glad you enjoyed it!

[@sherzodabdumutalibov1384]

thank you man! Спасибо брат, помог. Удачи тебе!

[@shraddha10827]

Good job!!!

[@Codemycom]

Thanks!!

[@EthioWonder]

You are the one you make me programmerr

[@RyanDanielG]

feed the algorithm! great vid

[@codeKeshav]

Using bind function in that image label can work as button too..

[@__noel_abraham__]

Thank you, actually i am searching for this

[@Codemycom]

happy to hear it

[@hello-my6ot]

Thank you!

[@Codemycom]

You're welcome!

[@ryce_jnes]

you the best in python

[@Codemycom]

Thanks!

[@asmerbay8200]

Thanks for this wonderful courses John.Could you make more videos about classes in Tkinter?

[@Codemycom]

Sure

[@deepikasinghj5486]

Tq It was a great help

[@Codemycom]

Glad to hear it!

[@mujassimjamal24]

Thank you so much sir 😊❤❤❤

[@Codemycom]

You're very welcome!

[@LearnwithAnsh]

8:28 I smashed the like button but my computer screen broke lol 😂

[@Codemycom]

ha!

[@hello-my6ot]

Hello john I did the same thing and it worked but it doesnt show my image as transparent but it was a transparent image. Do you know how to solve this?

[@katrinastewart3765]

very informative I'm new to coding all together. just one thing I struggled with here was adjusting the button sizes ? thank you!

[@Codemycom]

Glad it helped!

[@xtiankimochii7479]

It relly helps me . Thank u so much btw i why it is not working it say that image"pyimage8" doesn't exist but i all ready do it

[@yashmehta4799]

Thanks a ton for this video. Sir, could you make a video on gtts module and how can we use it in our tkinter code??

[@Codemycom]

I don't know gtts, but it would be interesting

[@arunvijay6493]

big fan bro..

[@Codemycom]

Thanks!

[@elysonpanolino7522]

Is there any way so that I can't click on the removed background?

[@alepuglisi5780]

John, I love this series! I've a problem with the button images, I use your image and even if my code is correct and I set the borderwidth at 0 I still continue to see the borders of button and it doesn't move... It can be because I'm using macOS?

[@shaktisinhjhala5758]

hey, try to add.. highlightthickness=0 along with borderwidth=0 ..it will solve your problem.

[@hillybankok]

@GoldenD60 true

[@alexindustries1672]

borderwidth doesn't work on mac can someone tell me how to fix that and also is there a way to display text on top of button image?

[@david0411]

Did you find any solution to this?

[@dimitriosdesmos4699]

there are some libraries that allow you to design the tkinter layout in a manner similar to the qt5 toolkit.....like a design interface with drag and drop buttons..etc etc..any chance you can review those in the future?

[@Codemycom]

could be

[@quinnfly1708]

how would i get rid of the white space around the button tho? i wanted to use a circle png with a background but the white part of the buttons still shows in the background, how do i make it so that it is strictly the png file?

[@BarsamJahanvash]

Perfect

[@Codemycom]

Thanks!

[@thitismit]

And if I want to get string from API and put it on rounded button with image, What must I do?

[@JalalDictaJet]

good work

[@Codemycom]

Thanks!

[@maxwellhawk]

i would like to see the one with themes ^^

[@psirohi7199]

Hi! Thanks for video, but I have an query. Can we use 3d graphics with tkinter?

[@Codemycom]

Not sure what you mean by 3d

[@digitalmachine0101]

Good information

[@Codemycom]

Thanks

[@ebaadkhan8501]

may god bless you may you be in peace,sir you are damn amazing lovee you alotttt!!!

[@Codemycom]

Thanks!

[@2527donni]

Is there a way to save the last used state of buttons clicked , slider positions etc to a file in tkinter? I can't find a way to make a backup of buttons pressed , sliders set , and then load it back into tkinter , some feature akin to the preferences/last used settings in software is what I'm looking for. Does Tk provides for this? . Awesome content you got John , I've smashed the like button :)

[@Codemycom]

Just assign whatever you want into a variable...then you can access it any way you want, whenever you want. Unless you mean like after the program has closed? Then you could save those things to a file in the normal python way...

[@MathematicalReasoning]

i had to capitalize Label and it worked

[@Codemycom]

Well yeah, Label is capitalized in the video. Code is always exact.

[@kaaaaasraa49563]

Greetings John, Please make a video about concatenating image and text in labels

[@Codemycom]

Good idea...all you have to do is use the compound attribute. compound=CENTER puts the text in the center, compound=LEFT puts it left, etc. Everything else stays the same. You can also compound top or bottom, center, left, right.

[@kaaaaasraa49563]

@@Codemycom Thanks 🙏

[@abhasoli2655]

Can you make a video on the ttk module widgets?

[@Codemycom]

I have several in the playlist already

[@johnemanuelalamares2206]

How to make it rounded when I have an image as my background? because the background of the button is still there

[@ShekhMukhtarMansuri]

edit background image in rounded shop in photoshop itself.. then import in python...

[@user-om1ud5hn3w]

nice video

[@Codemycom]

Thanks!

[@sepehr2371]

Great video, my problem with this is that if I was to click on somewhere a little outside of the login button, would it still get activated as the image itself is a square so the "hitbox" would be larger than the rounded button alone?

[@Codemycom]

depends on the image you use

[@sepehr2371]

@@Codemycom yeah also I figured that buttons for some reason dont allow transparency if you change the background colour to not white you will notice. I tried using root.wm_attributes("-transparentcolor", "somecolor") to sort of green screen the background of it but it resulted in a weird box that is see-through in the window.

[@Wuottfac]

Hello, Is possible in tkinter when a button clicked print a text in textarea and also clear it with another button?? Pls help me

[@Codemycom]

Sure, just keep watching videos in the playlist to learn this basic functionality.

[@mr_dodex]

Good.

[@Codemycom]

Thanks

[@user-cv6ze5cr1h]

hello! what can I do if I can't see the image on the screen? it looks like a grey square... Thank you for your useful videos!

[@Codemycom]

What did you do differently than the video?

[@Shaffi003]

Hi.. I'm a noob in python.. I am creating an app that process a csv file into some sort of configurations. I have a template csv file and i want to host in tkinter with button.. A csv file will get download once button clicked.. I looking for an idea.. Kindly help..

[@Codemycom]

Sorry, I'm not going to write your app for you.

[@joeldsouza2690]

Is there any attribute by which I could change the dimension of the image

[@Codemycom]

No, you need to actually resize the image with pil...I have a video on it.

[@liamgaeuman4990]

Hey John, I'm trying to make a card game in tkinter but I can't figure out how to select an image drag it and place it and then select a different image and do the same thing. I've decided to try turning my images into buttons and defining the selected image for dragging that way. Can you make a video on how to drag and drop multiple separate items? In your drag and drop video the image will just snap back to wherever you click on the screen which isn't what you want if you are going to select another item to drag.

[@kylebrooks8162]

I'd probably use pygame for that not tkinter.

[@liamgaeuman4990]

@@kylebrooks8162 I tried that too lol. It’s quite the process as well.

[@noname99832]

ttk Buttons are bit round from tkinter import * from tkinter import ttk root = Tk() Btn = ttk.Button(root, text="This looks a bit modern and its rounded") Btn.pack() root.mainloop() Note - You cannot change fg and bg of ttk.Button it have it's own style

[@debakamalhazarika7097]

Sir, how to round the corners of the canvas ? Your videos are really very good and sir please keep making it

[@afnanardi27]

what is the dimension of a button to use that in tkinter? like what would be the dimension if i want to make that in potoshop

[@Codemycom]

A button is the size of the text you put on it...so there is no one size...

[@ZAYN_ONE_DIRECTION]

does this work on a canvas?

[@RafaelMartinez-si2hm]

On Linux when I hover over my button it gets highlighted with a white color. Is there a way to change this?

[@Codemycom]

No idea

[@sameehazahid466]

whenever I try to use an image it say 'no such file or directory'. I have saved all the files I'm using to the same place which is the desktop. It works when opening programs but not images. Any way to fix this?

[@Codemycom]

You're getting that error because you aren't using the correct path to open the images.

[@johnpro2847]

1:15 John's lawyer makes him say this disclaimer...

[@amirmohammadk745]

wait why you dont use cntrl + b in sublime

[@isaacphiri8301]

An trying but am failing its saying that no such file or directory so what should I do

[@Codemycom]

three's a typo likely in your code.

[@JustAnotherCoder]

This is great thanks! The only problem is that it gives me this error "self.tk.call(('image', 'create', imgtype, name,) + options) _tkinter.TclError: couldn't recognize data in image file "images/inbox.png" when I try to run it using the code you showed us.

[@Codemycom]

is the file you're using an actual png file?

[@JustAnotherCoder]

@@Codemycom oh nevermind yeah that was the problem, I converted it to png and now when I run my program I just see 2 lines in the middle and no errors

[@matesss16]

I want to make button from transparent image and after that write some text on it (so the button looks like text). Is it some way how to do it?

[@Codemycom]

Use photoshop

[@matesss16]

@@Codemycom Thanks for response, but I have cca 40 buttons, so isn't there easier way 😅

[@shaktisinhjhala5758]

If one is using Tkinter with python-OOPs than only "self.login_btn = PhotoImage(...)" will be sufficient. no need to store the image's reference in "Label" as a variable with 'self' will be considered as an instance variable, which will prevent garbage collector to destroy reference object.

[@Codemycom]

Yeah but we aren't using classes here

[@shaktisinhjhala5758]

@@Codemycom yup👍 jst shared a thought 😄. Anyways great tutorials 🔥😊

[@Codemycom]

@@shaktisinhjhala5758 :-)

[@soham7226]

can I change the image of the button when hovering the mouse cursor?

[@Codemycom]

Sure

[@soham7226]

@@Codemycom how??

[@Codemycom]

@@soham7226 I have a video on that in the playlist

[@oussamathedjfreeman]

need corse about gui with animation buttons and video on it :)

[@Codemycom]

check the playlist

[@kingvg9567]

i tried it and saved the picutre i wanted to use in the same folder. When i try to run the code it says "pyimage1" doesn't exist. pls help!

[@Codemycom]

what did you do differently from the video?

[@proxnoob2]

thank you everything worked for me except borderwidth, when I am giving borderwidth it is showing this error _tkinter.tclerror: unknown option "-borderwidth", do you know how to solve it

[@Codemycom]

use bd=

[@Zhisaoka]

thank you so much, but for me when I change the borderwidth it wont work

[@Codemycom]

You're welcome!

[@gbg6750]

The problem is when we have a backgound image on label, then we still have the square chape at the button, is there some how to fix it?

[@Codemycom]

yes...don't I show you how to set the borderwidth=0 on the button? If not in this video, I know I do somewhere on the playlist..

[@Stocktan1]

@@Codemycom using borderwidth=0 doesn't fix it when you are using a different background :c help

[@Codemycom]

@@Stocktan1 It should

[@martindubois9279]

weird my code work on windows but not on my pi. i still see the border button on my pi

[@Codemycom]

yeah, pi's are different than windows

[@nayanendusanthosh2053]

Can we add multiple buttons ?Please reply..As in after we click one button the next input button appears..

[@Codemycom]

Why not?

[@sepehr2371]

yeah you can just somewhere in the button command function pack the next button and it should show up.

[@leothomas1113]

select_img = PhotoImage(file="/select2.png") select=Label(image=select_img) b = Button(frame, image=select_img, width=100, height=20, borderwidth=0, relief='raised', cursor='hand2', command=lambda roomno=r: book(roomno)) b.pack(anchor=E) this doesn't show any image on the button, nor does the button work. how to solve this ?

[@Codemycom]

Your code is all wrong. Rewatch the videos.

[@castropaulo5467]

hi i am beginner, it is related to your video the images buttons can't show after run the code can you help me? i already located the images in folder but still can't show you can solve?

[@JohnElder]

You'll have to rewatch the video and figure out what you did differently

[@castropaulo5467]

@@JohnElder the images can't show can you help me? i followed your instruction

[@Codemycom]

@@castropaulo5467 You'll have to rewatch the video and figure out what you did differently, you did not follow the instructions

[@nurizzahwanibintimartangbs2857]

i want to use ttk.Button insteac the usual Button, but it said _tkinter.TclError: unknown option "-borderwidth"

[@Codemycom]

yeah, ttk button doesn't have that attribute

[@huntermccauley4583]

My buttons will not display any image, only blank grey squares. Could it be because I'm using macOS? I've noticed it can be very restrictive with tkinter.

[@Codemycom]

Could be, but shouldn't... check your image paths...

[@huntermccauley4583]

@@Codemycom Image paths are correct. Interestingly, if I simply add the line create_image(image = 'my image') after I pack my button, then the image appears on the button as it should. But I don't believe this is the correct usage.

[@huntermccauley4583]

I forgot to add, any code after create_image(image = 'my image') will not show in the GUI, obviously not the correct usage lol.

[@Codemycom]

@@huntermccauley4583 Anything that works is the correct usage lol

[@datneanimation2336]

Can I put Image on Button when button is lying on Frame ? I can't do it. Help me. pls. Thanks

[@Codemycom]

Yes, in the exact same way

[@datneanimation2336]

​@@Codemycom Thanks. Can i add my images on Treeview ? I searched your youtube channel but I couldn't see it :((

[@shivanshukamboj7940]

It doesn't work when image is in background .....a square button shape appears on the back

[@nanduola]

bad geometry specifier "350*500" , why and solution ??

[@Codemycom]

use x not *

[@jazaaraian]

Hello! I used this guide to add this to my code but somehow get an error "image "py2image" doesn't exist". How to fix this one? Any guides?

[@Codemycom]

Is the image sitting on your computer in the directory that you're pointing to?

[@jazaaraian]

@@Codemycom Yes, I also double checks it

[@jazaaraian]

Is it possible to use it in one of the two tk window ? Or 1 has to be in Toplevel() ? It works when I do it on a new .py file.

[@Codemycom]

@@jazaaraian Yes, you have have to make your image variable global to use it in a second window

[@jazaaraian]

@@Codemycom Thank you ! I will try this one. I apologize if I ask for help here even though it's not should be.

[@athiradivakaran2036]

Tried the same..i have a background image...so even borderwidth is zero it looks like a rectangle button

[@Codemycom]

Then you're doing something wrong...check your code for typos

[@screensauce]

Pls do a vid on how to make a neon text In tkinter

[@Codemycom]

You'd have to use an image

[@sevilnatas]

For the life of me, I can't get the image to show up in even the simplest stage of your tutorial. The stage where you put the image in the label. Program runs but the window comes up with a blank window. Tkinter is kicking my ass for what seems basic, stupi reasons. I spent 2 days trying to get PIL and Pillow to work which is what lead me hear. All I want is an image button and even copying your code character by character (except for the image paths) I can't get anything to show up. I read somewhere that PhotoImage doesn't support PNGs and JPGs, but yours works fine. Also, mine won't allow me to use 'pady=20' in the pack method. There is something different between my tkinter and yours. I am on WIN 10 (64bit) in VS Code. Could that be the reason?

[@sevilnatas]

Wait, why is my 'pack' method making me capitalize 'Pack' but yours isn't? What version Python is your tutorial in?

[@Codemycom]

@@sevilnatas it's because VS code sucks. I use sublime text (free) and git bash terminal (free) git-scm.com and vs code doesn't "make" you capitalize it, it autocorrects. You can change it.

[@sevilnatas]

@@Codemycom Thanks for the feedback. I will try sublime and git bash terminal then. Any thoughts on the other parts of my comment. It seems bizarre that I can't even get the simplest example to run. I know debugging someones code is hard enough let alone when they ask you to do it without being able to see it but just wondering if you had any ideas off the top of your head where I shoul dgo to next? Thanks again....

[@Codemycom]

@@sevilnatas I couldn’t say...but using the other tools may clear up your other problems.

[@sevilnatas]

@@Codemycom Oki doke, I'll try it, thanks...

[@datimo5029]

So Insert image and your button is "rounded" but how to actually round the button (without inserting image)

[@Codemycom]

You don't

[@seshrisanjanaa153]

how to place back button?

[@Codemycom]

Huh? In the normal way you put any button in a tkinter app

[@black-ym5di]

hey john can tkinter be able to create UI like Jarvis?

[@Codemycom]

Sorry, I'm not familiar with Jarvis

[@rocketleagueshorts1961]

amazing video sir, but can you please tell how to get an image of that size ?

[@Codemycom]

Sorry, I don't know what you mean.

[@rocketleagueshorts1961]

@@Codemycom i watched your video on how to do a calculator. in that calculator app instead of having normal buttons i planned to have images of 1,2,3.. as button but i didnt get images for 1,2.. with a size which is equal to actual tkinter button size. so do you know any website where i can download an image where the size of images is small that we can use it for our projects ?

[@Codemycom]

@@rocketleagueshorts1961 I mean, google it there are millions of image websites. Or just resize the images yourself using photo editing software. gimp is free or there are tons of free image editing website. Google image editing

[@rocketleagueshorts1961]

@@Codemycom thx a lot

[@Vincent2103]

it works but my button says pyimage1, and its a jpg file so I did import PIL as well i forgot to change the 'text=' to 'image=' haha

[@Codemycom]

ha whoops!

[@j6mes]

You: put the image into the button Me: put the button into the image :|

[@Codemycom]

But you're literally putting the image in the button...you aren't putting the button into the image.

[@furkank5614]

All i have is white screen after 6:07. why is that ?

[@Codemycom]

You have a typo in your code somewhere

[@rubensahas9280]

Hi John, i have problem while inserting a image , while i load the image and set the background of root window to black , the background of the image is still default Is there anyway to make the background transparency? Even the same problem with label. Is ther anyway we can add image for scroll widget? this is how it looks. drive.google.com/file/d/1gDtwf6HlDlU2TFy8MRkyJehQOOmIIKmd/view?usp=sharing Thank you for your videos it really helping me alot. :)

[@sepehr2371]

I actually figured a way around this yesterday, it is probably going to break your mind since you have to redo some stuff but you have to use the canvas widget to allow for transparency as the root window doesnt support it on its own.

[@oz9985]

for me it only shows a blank label

[@Codemycom]

Then you did it wrong. Check your code vs the video and see where your mistake is.