Modern Buttons In CustomTkinter - Tkinter CustomTkinter 2

what's going on guys John Alder here from decanter.com and in this video we're going to look at buttons for custom Canter all right guys like I said in this video we're gonna look at buttons for custom kinter but for a good start if you like this video I want to see more like I'd be sure to smash like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and be sure to grab your totally free PDF copy of my kinter widget quick reference guidebook things awesome over 150 pages with all the kinter widget attributes get your free copy today just head over to tcantor.com forward slash widget Dash book enter your email address I'll send that right out to you and while you're there think about membership in tkinter.com you get all my courses all my future courses run low price use coupon code YouTube to get 30 off membership if you're interested all right in the last video we started talking about customkinter in this video I want to continue on and talk about the first main widget which is the button now I get it this is not that exciting it's a button right but there are some things you need to know you could do different things with custom kinter buttons and you could do with regular buttons and there's a little caveat in there that will trip you up and I'll show you that right away if you're used to using regular buttons with Kinder this is slightly different in their use so you're going to want to watch this so let's head over to our code I'm using the Sublime Text Editor and the get batch normal as always and as those you can find a link to the code in the pin comment section below as well as a link to the playlist with all the other videos in this custom kinter playlist so check it out if you haven't so far so I've got a file I'm just calling it ctk underscore button ctk for custom kinter I guess and this is our basic custom Kinder starter code we looked at this in the last video we're going to be using this default code going forward I'm using the Dark theme in the dark blue color theme and everything else is the same so let's come down here let's create a button I'm going to call it my underscore button and this is going to be a customkinter.ctk button now notice the c and the T are capitalized the K is lowercase and then the B again is button this is the convention for all the widgets the first little ctk thing is capitalized in this way and then the widget itself is usually capitalized so all right so let's just create a basic button here I'm going to call this we're going to put this in root we want the text to equal hello world boom boom all right and let's give this a command of hello so we want the command hello to run whenever we click this button we don't have that yet so let's just come up here and real quick Define hello and for now we'll just pass so let's come down here in my underscore button dot pack this guy and let's give this a pad why of like 80 to really push it down the screen so okay if we go ahead and save this and run it we can guess what this is going to look like so I'm in my ctkinter.com directory let's run python ctkbutton dot pi and when we do we just get this basic button now this is the Dark theme with the dark blue color scheme right so when you hover it changes color the text of the button is white okay pretty basic pretty simple if this is all you want to do that's all you need to do right so we click this nothing happens yet but we can configure this button in a whole lot of different ways and also when we want to do something with this button it's slightly different than with tkinter so this is the thing I was talking about it's a little bit a little bit weird not weird just a little different so I'll show you how to do that right now in fact let's just come down here let's create a label real quick underscore label this is going to be a CT now we haven't talked about ctk labels yet but there's not much to talk about with the label I'm going to set the text equal to nothing and then let's my underscore label dot pack this guy give it a pad why 20 push down screen a little bit so now we come up here and whenever we click that button we want to change the text of our label so let's go my label now normally and this is the tricky part well not too tricky just different right normally with kinter you would config and then set the text equal to whatever right this isn't going to work if we run this we're going to get an error here whoops that's the wrong error if we come down here this should be custom decanter dot ctk label all right so we're going to get a different error if we try to run this and then click this button boom you see oh very angry stuff why because config doesn't work in custom kinter right that's the shorthand we use in kinter it doesn't work with custom kinter so this always has to be configure right so if we save this and run it get rid of this error run this guy again now when we click this boom it just says whatever down here so keep that in mind just a little different than regular Canter but you know something that's very important when you come right down to it because the button won't work otherwise so we can put whatever we want here I've just put the word whatever uh just for fun let's put whatever the text is of the button and we can get that in custom teak enter by calling my underscore button dot C get and then we just want the text and actually we want to put this in quotation marks so this will just return whatever the text is of our button in our case it's hello worlds let's go ahead and save this run it uh you know I don't know why you would ever want to know what the text of your button is but if you did that's one way to get it and there we go so okay it says hello world there that's kind of cool now let's play around with this button we can do all kinds of things with this button we can configure it in lots of different ways that you can't with regular buttons in kinter so it's really cool uh how we can play around with this and so let's come up here and do that so we can come here to our button and I'm going to put all these things on separate lines just so it's easier to read here so what can we do so the first thing we can do is set a height and a width so let's set this height to 100 and let's set the width to say 200 now this is very cool because in regular kinter if you want to change the size of the button you have to just sort of change the font size of the font to a bigger font to make the button bigger this is a quick and easy way you can change the size of the button itself using custom kinter very cool let's save this and run it see how that looks and now we have this giant button and that's kind of cool now you'll see it's kind of squarish but also sort of rounded we can change that as well we'll look at that in a second but first let's look at the font this is too small for this bigger button now how do we change that super easy just like with regular tkinter we can set the font and here I'm just going to change it to helvetica and let's give it a font size of like 24 or something like that nice and big and go ahead and save this and run it and boom we get nice big text that's kind of cool stuff tiny text down here all right so that's nice we can change the color of that text if we want too very easily so we could do that just by changing the text underscore color and so I'm just going to call this black you could also use your hex codes so whatever the hex color code for Black is I can't remember offhand I think white is zero zero zero zero zero zero something like that but all your hex codes you can use or you could just use words like black right so if we save this and run it we now get black text it's kind of cool you'll notice that the color is different as we hover so we can change both the background color of the button and the hover color so let's change the background color first you would think that would be the background color but it's not it's actually for buttons it's the foreground color so if we want to change this to like red make it really obnoxious and again you can also use your color codes anytime we do anything with color with Kinder or custom tkinter you can always use your hex codes or just the word itself so now it's this obnoxious red color which is you know horrible looking but you can change it to whatever color you like so how do we change the hover color well as you might guess that is just hover underscore color so I don't know let's make this green let's try and make this as ugly as we possibly can right right so we got Christmas colors going on red and green so as you hover it changes very cool like I said we can change the radius so you can see it's kind of square but the corners are a little rounded we could change the radius for that by changing the corner underscore radius and this you can change it to anything you want want the higher the number the more rounded it becomes so if we save this come back over here and run this guy now we get sort of a very rounded button very cool I could change that to whatever you want now you'll notice that the background the back background is transparent and you could tell because of the roundedness here this is still a square thing but the Border has been rounded and where the rest of the stuff is that's the background and you can see it's transparent it's just the same color as our general app background but we can change that if we want by changing the background color so let's go BG underscore color and let's just change this to White so we can really see it stand out it's gonna be ugly but you know that's what we're trying to do here you can see now the background is white so as this becomes more curved more of that background will show up so that's cool what else can we do well we could put a border around this curve button that's really neat so to do that we just set the border with order underscore with and let's set that to like 10 to make it really big so that we can see it save this and run it now we get this uh border here and you can see it's sort of gray which is whatever decent color we could change that color as well by changing the Border underscore color so if we want to change that to yellow or something horribly colored so we can do that and now it's got a border a big thick 10 pixel border of yellow so those are your main things there's a couple other attributes I didn't talk about but they're not super important you can set the state of this as well and I guess we can look at that real quick if you really wanted to it's the same as kinter though right so we can set the state equal to disabled if we save this and run it now when we hover nothing happens you can see the text is sort of grayed out when I'm clicking this here nothing has happened because the state is disabled if you then wanted to enable it again you could set the state to just normal save this and run it I mean normal is the default so we don't have to set it to that see again it works now very cool and that's all there is to it so that's the custom kincher button much more versatile than a regular tkinter button and really kind of intuitive and easy to use you want to change the hover color it's hover color if you want to change the quarter radius it's Corner radius if you want to change the border with its border width it's very intuitive order color is border color all right so super easy not a lot of stuff you have to memorize it's just sort of oh obvious but you might have to look it up first few times as you get used to it but after that it's just going to be super easy to do and that's all there is to it so that's all for this video if you liked it be sure to smash like button below and subscribe to the channel give me a thumbs up for the YouTube algorithm and be sure to grab your totally free PDF copy of my kinter widget quick reference guide book this thing is awesome over 150 pages with all the Canter widget attributes grab your free copy today just head over to tkentry.com forward slash widget-book enter your email address I'll send that right out to you and while you're there think about membership ntkinter.com you get all my counter courses all my future course sources for one low price use coupon code YouTube you get 30 off membership if you're interested my name is John Elder from teakinter.com and I'll see in the next video

Channel: Tkinter․com

Views: 24,451

Keywords: customTkinter button, tkinter customtkinter button, customtkinter button widget, CTkButton, ctkbutton example, customtkinter button height, customtkinter button width, customtkinter button color, tkinter.com, john elder, john elder tkinter, john elder customtkinter, john elder customtkinter tutorial, john elder tkinter tutorial, tkinter modern gui, python tkinter, python gui

Id: WE1IuPOICxE

Length: 11min 38sec (698 seconds)

Published: Tue Aug 15 2023