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

[@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!

[@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!

[@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!

[@IRONMAN36554]

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!

[@amirmohammadk745]

best python teacher #1

[@elysonpanolino7522]

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

[@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

[@khyatiparikh2929]

its exactly what i wanted.... thanks codemy

[@Codemycom]

Glad you liked it!

[@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 ?

[@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?

[@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. 😊

[@stellaschmucker3059]

Love your video!!❤

[@Codemycom]

Thanks!

[@brandonhagopian7165]

Thank You so much for your effort John!

[@Codemycom]

Thanks for watching!

[@abhasoli2655]

Can you make a video on the ttk module widgets?

[@Codemycom]

I have several in the playlist already

[@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?

[@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

[@thitismit]

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

[@LearnwithAnsh]

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

[@Codemycom]

ha!

[@codeKeshav]

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

[@ZAYN_ONE_DIRECTION]

does this work on a canvas?

[@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

[@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

[@anuragthakur5787]

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

[@Codemycom]

Happy to hear it!

[@amirmohammadk745]

wait why you dont use cntrl + b in sublime

[@sherzodabdumutalibov1384]

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

[@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...

[@EthioWonder]

You are the one you make me programmerr

[@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

[@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!

[@dimitriosdesmos4699]

thanks for that, i needed it.

[@Codemycom]

Glad I could help

[@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

[@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 😅

[@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?

[@rubenmata73]

Just GREAT!!!! THANKS!

[@Codemycom]

Glad you liked it!

[@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.

[@הדרתורגמן-ח8ו]

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?

[@__noel_abraham__]

Thank you, actually i am searching for this

[@Codemycom]

happy to hear it

[@darkjunior2162]

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

[@Codemycom]

You're very welcome!

[@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.

[@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.

[@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.

[@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

[@RyanDanielG]

feed the algorithm! great vid

[@furkank5614]

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

[@Codemycom]

You have a typo in your code somewhere

[@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...

[@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.

[@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

[@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 :((

[@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...

[@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=

[@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

[@shivanshukamboj7940]

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

[@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.

[@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

[@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

[@asmerbay8200]

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

[@Codemycom]

Sure

[@datimo5029]

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

[@Codemycom]

You don't

[@ryce_jnes]

you the best in python

[@Codemycom]

Thanks!

[@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.

[@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

[@kundanjadhav8758]

why u use pack instend of place

[@Codemycom]

Personal preference.

[@kundanjadhav8758]

@@Codemycom do u have any video on grid, place, pack

[@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.

[@maxblax9159]

I just thank you for this

[@Codemycom]

Glad you enjoyed it!

[@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

[@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.

[@shraddha10827]

Good job!!!

[@Codemycom]

Thanks!!

[@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...

[@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

[@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.

[@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

[@johnpro2847]

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

[@mujassimjamal24]

Thank you so much sir 😊❤❤❤

[@Codemycom]

You're very welcome!

[@Vincent2103]

is the login picture in your github?

[@Codemycom]

probably, but use any image you like...there's a million free ones everywhere online

[@Zhisaoka]

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

[@Codemycom]

You're welcome!

[@shubhanshusharma5372]

Pls help it showing error unknown option "-borderwidth"

[@Codemycom]

did you put it in the right spot?

[@shubhanshusharma5372]

Thanks for reply here is line of code createacc=Button(root,image=newpicj,borderwidth=0)

[@Codemycom]

@@shubhanshusharma5372 you also need to give it a relief="groove" or relief="sunken" or whatever

[@shubhanshusharma5372]

@@Codemycom unknown option "-relief"

[@arunvijay6493]

big fan bro..

[@Codemycom]

Thanks!

[@phudinhtruong]

another great video . tks u alot

[@Codemycom]

Glad you liked it!

[@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 🙏

[@shivanshukamboj7940]

How to make that image make smaller in a button

[@Codemycom]

resize it

[@shivanshukamboj7940]

@@Codemycom thanks a lot ......can you tell how to close all windows including main tkinter window from a sub-window without crossing each and every window eg : termination of an app

[@Codemycom]

@@shivanshukamboj7940 sure, I think I have videos on that already on the playlist.

[@shivanshukamboj7940]

@@Codemycom Going to watch it right now.... Thanks a lot......master

[@shivanshukamboj7940]

@@Codemycom also can you help on how to solve pyimage doesn't exist when I am creating a tkinter window through calling a user defined function

[@corruptedcookie8349]

What is icon bit map

[@Codemycom]

The icon in the titlebar

[@black-ym5di]

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

[@Codemycom]

Sorry, I'm not familiar with Jarvis

[@seshrisanjanaa153]

how to place back button?

[@Codemycom]

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

[@hello-my6ot]

Thank you!

[@Codemycom]

You're welcome!

[@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

[@JalalDictaJet]

good work

[@Codemycom]

Thanks!

[@davidkeeper7292]

Please not working on my Mac ,I used a transparent png

[@Codemycom]

It should work on a mac

[@david0411]

How did you fix it?

[@deepikasinghj5486]

Tq It was a great help

[@Codemycom]

Glad to hear it!

[@oussamathedjfreeman]

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

[@Codemycom]

check the playlist

[@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.

[@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 :-)

[@digitalmachine0101]

Good information

[@Codemycom]

Thanks

[@bernadethbautista-clomagul1291]

How to insert image button on next window?

[@Codemycom]

In the same way you add anything to another window. I have videos on that in the playlist.

[@screensauce]

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

[@Codemycom]

You'd have to use an image

[@יש_המשיח]

i had to capitalize Label and it worked

[@Codemycom]

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

[@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

[@glazelucki]

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.

[@Cornievenzter]

If your background is dark or darker , a white block still appear when clicking on it

[@Codemycom]

huh?

[@Cornievenzter]

@@Codemycom huh?

[@Gkwazy]

@@Cornievenzter if I understand correctly, you have to then change the activebackground of the button to match the darker background of the application

[@maxwellhawk]

i would like to see the one with themes ^^