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

what's going on guys john elder here from codingme.com and in this video i'm going to show you how to do round buttons with kinter and python all right guys like i said in this video we're going to do round buttons but before we get started if you like this video want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codingme.com we have dozens of courses with hundreds of videos that teach you to code use coupon code youtube1 to get 30 off membership that's all my courses videos and books for one time fee it just 49 which is insanely cheap all right so i've been getting a lot of questions lately about how to do round buttons in kinter and that's we're going to look at in this video but the short answer is you can't this is a button in kinter they're square they're regular you can't really change them but we can sort of hack it around a little bit and make it so that we can use round buttons we just have to use images so that's what we're going to do in this video so let's go ahead and close this and i've created a new file i'm calling it round.pi it's the basic kinter code starter code that we always have we've got a title we've got an icon we're going to make it 400 by 400 and we've got our main loop and of course we're importing kinter so right off the bat let's see let me pull up photoshop i just found this button online at a free photo website that you can download free images on it's just a basic login button it's transparent you can see i've just got it open in photoshop and i saved it to our c gui images directory if you've been watching these videos for a while you know we've got a directory in our gui directory called images and from time to time i throw image files in there if you haven't been following along with the videos in this series check the playlist in the comment section below there's a link to it there so what we need to do is use an image and make it into a button so how do we do that well first let's just create a label i'm going to call it image label and that's going to be a label and it's going to be in root well actually we don't need to do anything with it right yet let's go image underscore label dot pack and let's give this a pad y of 20 for now and what we want to do is make this label into an image we've done this before and we can use the photo image widget to do that so i'm going to call this login because it's a login picture or login underscore btn maybe and then this is just photo image and then the file equals and like i said i put this in images and then the name of the file itself is login dot png it's a png file right so now we can just take this login button image that we've defined and just stick it in here as image equals that right now in the past we've done a little bit different sort of image things we've used the pillow library you can do that as well in the same way we've used images in the past this is just sort of an easier way to quickly do simple images so that's what i'm going to use so i'm going to go ahead and save this and let's head over to our terminal and let's run python round dot pi and when we do boom we get this image now this is not a button it's just an image right so we can't i'm clicking on it now and nothing is happening but at least we've got it on the screen so this is the image that we're going to use we're going to turn it into a button so to do that let's create an actual button and i'm going to call it my underscore and button set that equal to a button widget and it's in root and we want the text to equal click me and we want the command to equal thing doesn't really matter and let's go my underscore button dot pack and give this a pad y of 20. so now we've got this command let's create this function i'm just going to come up here and define it and let's create a label and i'm going to call it my underscore label and then let's config that and then set the text equal to you clicked the button dot dot right and then down here we need to actually define that label so let's go my label and it is a label and it's in root and we want the text right now to equal nothing and then we need to put this on the screen so mylab.pack and let's give this a pad y of 20 as well so let's just save this and make sure this is working right so we click me you click the button right again this guy up here still doesn't work so okay so now what we need to do is put this image in this button right and it's super easy to do that so all we have to do is grab well basically this right here this image equals and just come down here to our button and instead of text we just put that in i'm going to come up here and let's see our image label let's take this off the screen okay so that the image is gone but now the button should be an image right so go ahead and save this now let's run it and we see we've got this button and you notice it's still square but it's clickable and when we click on it the function gets called and it outputs you click the button to the screen so okay the button works and that's cool but likely this is not what you want you don't want to have this outline for this image it's kind of stupid looking oh maybe you do want that it just sort of depends uh if you're using a square image maybe you do want the button to be raised like that so it just depends on what you're doing but i don't want this square thing around here so i want to get rid of it how do we do that well that is super easy we just give our button a border width attribute so let's head back over to our code and find our button and right after the command we can just go comma border with and then we can set this equal to anything we can set it equal to 10 to make it really thick if we run this now suddenly we've got this big border around here that's definitely not what we want what we want obviously is to set this equal to zero so then that will make no border around it and uh let's run this and see it and boom there we have it now if we click on it boom it kind of you can see it kind of moves when you click on it so that's cool just like a regular button would but here you have nice rounded button and uh it works now i realize when people ask me how do we make round buttons or rounded buttons they're not really talking about this they don't want to create an actual image that they have to then use they want to just like give the button itself an attribute of rounded corners or something but you can't do that that's not how kinter works what you can do is make images like this and you can make them look any way you want right so let's pull up let me just really quickly pull up a file explorer pull this over so here is our gui directory and here's our images directory inside of that and here's some of the images i've used in the past so here's aspen.png it's a great picture of my dog aspen we can use that if we wanted to so you could come back here and set this photo image thing instead of login we can change it to aspen right if we save this and then run it let's close this first boom now let's run this again you see the whole thing here is is the picture and still we can click on it and it has a button so you can make these look however you want and that's really kind of powerful really you just need to you know work on your photoshop skills or like i did i went to a free image website there's thousands of them online you can just google it and i just downloaded a button that i liked and saved it to that directory and that worked so let me change this back very cool so that's really all there is to it pretty simple and a nice way to style your app now kinter also comes with themes that you could sort of download and install that will change how a regular button looks but that is very convoluted and very messy and hard to do and just doing it like this using an image i think is much much easier so that's what i suggest you do so that's all for this video if you liked it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out kodamy.com where you can use coupon code youtube1 to get 30 off membership say page is 49 to access all my courses over 40 courses hundreds of videos and the pdfs of all my best-selling coding books join over 100 000 students learning to code just like you my name is john elder from codeme.com and we'll see in the next video

Channel: Codemy.com

Views: 127,355

Keywords: python tkinter image button, add image in button tkinter, how to add image to button in python tkinter, tkinter rounded buttons, tkinter images, tkinter round buttons, tkinter rounded corners, python tkinter round, python tkinter round button, graphical user interfaces python, python gui app, python tkinter gui, tkinter gui examples, how to add image in label in tkinter, tkinter image, tkinter image label

Id: bVnKX0315lo

Length: 8min 50sec (530 seconds)

Published: Thu May 07 2020